108

I have this HTML code:

<html> <head> <script type="text/javascript"> function GetDoc(x) { return x.document || x.contentDocument || x.contentWindow.document; } function DoStuff() { var fr = document.all["myframe"]; while(fr.ariaBusy) { } var doc = GetDoc(fr); if (doc == document) alert("Bad"); else alert("Good"); } </script> </head> <body> <iframe id="myframe" src="http://example.com" width="100%" height="100%" onload="DoStuff()"></iframe> </body> </html>

The problem is that I get message "Bad". That mean that the document of iframe is not got correctly, and what is actualy returned by GetDoc function is the parent document.

I would be thankful, if you told where I do my mistake. (I want to get document hosted in IFrame.)

Thank you.

Improve this question
2
  • 8
    This was asked in 2010, today in 2015, this would not work in any newer browser, unless you are developing to google.com. Because of cross origin policy, you cannot access the content of the iframe, if it points to a page on a different domain than the one your original document is loaded from. Commented Nov 5, 2015 at 22:50
  • if anyone need to Access elements of parent window from iframe, see stackoverflow.com/questions/7027799/… Commented Feb 8, 2022 at 6:55

4 Answers 4

Reset to default
213

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Huh? That will return either undefined (most browsers) or the document that the <iframe> element is in (IE), which is precisely the problem the OP wants to fix.
Oops, I guess that's what I get for not testing it first :-/. I just edited it to add the contentWindow reference.
note that iframe.contentDocument == iframe.contentWindow.document
stackoverflow.com/a/9393545/19068 is worth a look if you do need to deal with this across origins.
21

The problem is that in IE (which is what I presume you're testing in), the <iframe> element has a document property that refers to the document containing the iframe, and this is getting used before the contentDocument or contentWindow.document properties. What you need is:

function GetDoc(x) { return x.contentDocument || x.contentWindow.document; }

Also, document.all is not available in all browsers and is non-standard. Use document.getElementById() instead.

Improve this answer

Comments

5

In case you get a cross-domain error:

If you have control over the content of the iframe - that is, if it is merely loaded in a cross-origin setup such as on Amazon Mechanical Turk - you can circumvent this problem with the <body onload='my_func(my_arg)'> attribute for the inner html.

For example, for the inner html, use the this html parameter (yes - this is defined and it refers to the parent window of the inner body element):

<body onload='changeForm(this)'>

In the inner html : 

 function changeForm(window) { console.log('inner window loaded: do whatever you want with the inner html'); window.document.getElementById('mturk_form').style.display = 'none'; </script>
Improve this answer

Comments

5

You can also use:

document.querySelector('iframe').contentDocument
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.