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.
-
8This 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.aorcsik– aorcsik2015年11月05日 22:50:14 +00:00Commented Nov 5, 2015 at 22:50
-
if anyone need to Access elements of parent window from iframe, see stackoverflow.com/questions/7027799/…yu yang Jian– yu yang Jian2022年02月08日 06:55:01 +00:00Commented Feb 8, 2022 at 6:55
4 Answers 4
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.
4 Comments
undefined (most browsers) or the document that the <iframe> element is in (IE), which is precisely the problem the OP wants to fix.iframe.contentDocument == iframe.contentWindow.documentThe 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.
Comments
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>
Comments
You can also use:
document.querySelector('iframe').contentDocument