Get iframe html or name from parent window - javascript

I have a page that loads few iframe's within itself.
Each iframe can invoke parent function.
For example like this:
$(document).ready(function() {
parent.test();
}
I want to be able to find which iframe invoked test function.
I've tried to play with calleer.called properties but the best I could get is the function that calling test().
In my case it was $(document).ready function.
Is there a way to get the name of iframe (or it's html name) which calling the function?

If you pass a parameter to the test function it will work:
$(document).ready(function() {
parent.test('name of this iframe');
}
OR even better
$(document).ready(function() {
parent.test(window.name);
}
Then you just need to use that value passed to the inside of the test function.

Related

How to access an HTML element within a self invoked function.

I am pretty new to JavaScript so I don't know the ins and outs of the language but I do have some knowledge of it. I created a self invoked function that would sort an array of zip-codes and then output it to a div element in the html file.
Unfortunately, the output isn't going into the div element because the function is executed before the html elements is ready, therefor it doesn't exist.
Is there anyway that I could access the div element within the function without having to use Window.Load, etc?
Thank you! click on the link below to view my function.
Screenshot of function
Is there anyway that I could access the div element within the
function without having to use Window.Load, etc?
Just move that code to the end of your html - after elements in question.
For example after </body>
From what I know, you can't access the DOM if it doesn't exist in that moment.
I know I know, don't use window.onload. But I assure you this is different than waiting for the DOM to load and then follow up with your calculations.
You can have a function evaluate something, then actually hang on the result and wait, and then finally fill the innerHTML when the DOMContentLoaded event has fired... or perhaps something of similar flavour, have a look at this.
<script>
const calculations = (function () {
// Super smart calculations...
var output = "Result of smart calculations";
function findWhereOutputGoes() {
return document.getElementById('output-div');
}
return {
output: output,
findWhereOutputGoes: findWhereOutputGoes,
}
})();
document.addEventListener('DOMContentLoaded', function(){ // Fires as soon as DOM has loaded
calculations.findWhereOutputGoes().innerHTML = calculations.output;
});
</script>
<div id="output-div">
</div>

jsFiddle onload and no-wrap in body

I am trying to get myself started with jsFiddle. So I tried to run a simple code snippet which includes all HTML, CSS and JavaScript code.
Javascript does not works If I select onLoad in Frameworks & Extensions dropdown
But it does work when I select No Wrap - in from the dropdown
Can you tell me what that means . I have already read this question on SO JavaScript not running on jsfiddle.net
But not able to understand the solution mentioned there.
When you select onLoad, your JavaScript is wrapped with an onload function. This means your code will run when the page has finished loading, but is no longer available in the global scope. It looks like this
window.onload=function(){
function myFunction() {
alert("Hello");
}
}
A workaround might be to assign variables to the window object so that they are accessible anywhere in the page.
For example:
function myFunction() {
alert("Hello");
}
window.myFunction = myFunction;
and
<button onclick="window.myFunction()" >Hi</button>
When using onLoad, the function won't become global one, so you can't invoke it directy from HTML. If it is global - like when using no-wrap - it works.
The onLoad generates something similar:
window.onload = function () {
function myFunction() {
}
}
So, myFunction() is only visible directly in the closure of the anonymous function.

Which event I have to use in jquery to get called before my page elements load?

I want to use boomrang framework in Jquery to get the bandwidth of the user's network which has to be displayed on the screen as "connection : fair/poor/good".
With on ready,on load, etc.., javascript function will be called only after the elements are ready to be accessed. But, I want the boomrang call to be called quite before that. Please tell me which event I have to use so that function call can happen before the elements of the page loads. Thanks in advance.<>
Note: I have tried by putting script tag at the top of the head tag. But still page elements are getting evaluated first (along with their el expressions).
If you want your function to be called before DOM creation then you dont need to call your function in any onload or on(document).ready, what you have to do is just call your function inside the script tag
For example (Script on the top of the page)
<script>
function abc()
{
// function desc
}
abc(); //Will be called as soon as the url is opened
$(document).ready(function()
{
abc(); // will be called when the DOM is ready
});
</script>
Use bw plugin from boomrang freamework
http://yahoo.github.io/boomerang/doc/howtos/howto-3.html

How to use jQuery commands on the parent document inside a iFrame?

Info: I've read a lot of questions about jquery accessing iframe and such so, but i've not found anything about the inverse that is: Inside the iframe access the parent document to change, and bind some elements from the parent document.
Problem: I dont know how to do that.
What i've tried:
1st try:
function ajax(){
$(document.parentNode).contents().find("#ajaxLoading").show();
document.parentNode.contentWindow.$('#mainFrame').load(function(){
$(document.parentNode).contents().find('#ajaxLoading').hide();
$(document.parentNode).contents().find('#pnlContentHeader').removeClass('front');
});
}
2nd try:
function ajax(){
document.parentNode.$("#ajaxLoading").show();
document.parentNode.$('#mainFrame').load(function(){
document.parentNode.$('#ajaxLoading').hide();
document.parentNode.$('#pnlContentHeader').removeClass('front');
});
}
3rd try:
function ajax(){
document.parentNode.find("#ajaxLoading").show();
document.parentNode.find('#mainFrame').load(function(){
document.parentNode.find('#ajaxLoading').hide();
document.parentNode.find('#pnlContentHeader').removeClass('front');
});
}
I need some help with that, i dont really know what i'm doing...
This should work using window.parent.document:
$(window.parent.document).find("#ajaxLoading").show();

call javascript function from outside an iframe

I have one entire html openning inside an iframe that contains a javascript function getData().Now I am not sure how to call getData() from outside that frame.Also is it possible to call it from an external javascript file ?
You can get a reference to the frame window object from the window.frames property. See https://developer.mozilla.org/en/DOM/window.frames
UPDATE:
You can access the global context of a named iframe with window[framename]. e.g:
<iframe src="data.html" name="data"></iframe>
<script>
var myData = window.data.getData();
</script>
Although you will need to make sure the iframe has loaded.
In jQuery you can use the contents method if you want access to the iframe DOM:
$("iframe").contents()
All this is assuming the frame hosted within the same domain.
UPDATE[2]:
You asked if it is possible to call the getData function from an external js file. The answer is yes (if I understand you correctly). Here is an example:
<html>
<head>
<meta charset="utf-8">
<title>parent page</title>
</head>
<body>
<iframe src="data.html" name="data"></iframe>
<script src="getdata.js"></script>
</body>
</html>
Then in the getdata.js file you have:
var dataFrame = window.data;
// when the frame has loaded then call getData()
dataFrame.onload = function () {
var myData = dataFrame.getData();
// do something with myData..
}
Hope this answers your question :)
In certain situation there could be a neccessity of calling a javascript function inside an iframe from the parent document, and vice versa ie;
calling a javascript function in parent document from the iframe.
For example; the parent document have an iframe with id attribute ‘iFrameId‘, and the function ‘functionInIframe()‘ is defined in that iframe document.
Following code can call that iframe function from the parent document itself.
document.getElementById('iFrameId').contentWindow.functionInIframe();
And following code can call the function defined in parent document(functionInParent()) from the iframe itself.
parent.functionInParent();
This way javascript can interact between parent document and iframe.
This is the original post.
in these cases you name your iframe and the main body that uses/launches frame and then use parent.objectname, in JS everything is Object and you should be able to call getData()
a quick googling led me to this -> http://www.esqsoft.com/javascript_examples/iframe_talks_to_parent/

Categories