How to access parent Iframe from javascript

Question

Well, I have an IFrame, which calls a same domain page. My problem is that I want to access some information from this parent Iframe from this called page (from javascript). How can I access this Iframe?

Details: There are severals Iframes just like this one, that can have the same page loaded, because I am programming a windows environment. I intend to close this Iframe, that's why I need to know which I should close from inside him. I have an array keeping references to these Iframes

EDIT: There iframes are generated dynamically

Answer 1

you can use parent to access the parent page. So to access a function it would be:

var obj = parent.getElementById('foo');

Answer 2

I’m not sure I understand your problem.

You have an original document, let’s call it document 1. We are interested in one of iframe children of his, document 2. This child loaded another page (another iframe?), let’s call it document 3. You run a script in document 3.

You have access to document 2 via parent property of document 3 (and to document 1 via parent.parent, but that is irrelevant). Why cannot you close document 2?

Answer 3

Try this, in your parent frame set up you IFRAMEs like this:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

Note that the id of each frame is passed as an anchor in the src.

then in your inner html you can access the id of the frame it is loaded in via location.hash:

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

then you can access parent.document.getElementById() to access the iframe tag from inside the iframe

Answer 4

Also you can set name and ID to equal values

<iframe id="frame1" name="frame1" src="any.html"></iframe>

so you will be able to use next code inside child page

parent.document.getElementById(window.name);

Answer 5

self.frameElement.id

Answer 6

Old question, but I just had this same issue and found a way to get the iframe. It's simply a matter of iterating through the parent window's frames[] array and testing each frame's contentWindow against the window in which your code is running. Example:

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

Or, using jQuery:

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

This method saves assigning an ID to each iframe, which is good in your case as they are dynamically created. I couldn't find a more direct way, since you can't get the iframe element using window.parent - it goes straight to the parent window element (skipping the iframe). So looping through them seems the only way, unless you want to use IDs.