Get Iframe'S Document, from JavaScript in Main Document

Get IFrame's document, from JavaScript in main document

You should be able to access the document in the IFRAME using the following code:

    document.getElementById('myframe').contentWindow.document

However, you will not be able to do this if the page in the frame is loaded from a different domain (such as google.com). This is because of the browser's Same Origin Policy.

Getting parents document from iFrame

It's still possible to access the parent from within a frame provided that the domains match.

For example, have a look at these fiddles:

• Frame host: fiddle.jshell.net, parent host: fiddle.net Does not match = failure
  Test #1: http://jsfiddle.net/nrRQg/1/
• Frame host: jsfiddle.net, parent host: jsfiddle.net **Matches = success*
  
  Test #2: http://jsfiddle.net/nrRQg/1/show/

You can access the parent through:

window.parent
parent
top          //If the parent is the top-level document
window.top

The variables parent and top can be overwritten (usually not intended). It's safer to use window.parent to be more safe. Alternatively, you can replace window by document.defaultView.

How to get document object of iframe?

Not so much clear what you want but if you want to update elements inside the frame you need to replace 'document' by iframe document like this:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

Then your code will be like this:

var oldlink = innerDoc.getElementsByTagName("link").item(1);

var newlink = innerDoc.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);

innerDoc.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);

Getting the document object of an iframe

Try the following

var doc=document.getElementById("frame").contentDocument;

// Earlier versions of IE or IE8+ where !DOCTYPE is not specified
var doc=document.getElementById("frame").contentWindow.document;

Note: AndyE pointed out that contentWindow is supported by all major browsers so this may be the best way to go.

• http://help.dottoro.com/ljctglqj.php

Note2: In this sample you won't be able to access the document via any means. The reason is you can't access the document of an iframe with a different origin because it violates the "Same Origin" security policy

• http://javascript.info/tutorial/same-origin-security-policy

Get element from within an iFrame

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

You could more simply write:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

and the first valid inner doc will be returned.

Once you get the inner doc, you can just access its internals the same way as you would access any element on your current page. (innerDoc.getElementById...etc.)

IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.

Access elements of parent window from iframe

I think the problem may be that you are not finding your element because of the "#" in your call to get it:

window.parent.document.getElementById('#target'); 

You only need the # if you are using jquery. Here it should be:

window.parent.document.getElementById('target'); 

Get the iframe name from the source document

Well, the quick and dirty solution would be to give the iframe the same name and id and access the iframe within the child page like this:

parent.document.getElementById(window.name);

---

Related Topics