Search code examples
domiframesame-origin-policy

fail to access child iframe content as expected

Just try a very simple case about <iframe> tag usage, while the result confused me. Hope anyone can help me. I am waitting, thanks.

Basically, I have two simple pages, top.html and iframe.html, they are the same domain, and iframe.html is the "src" of <iframe> tag in top.html.

When I try to access <iframe> content in top.html, while result is so wierd, all elements are blank.

console log from top.html is so wierd, and console log from iframe.html is expected.

// console log from top.html after load page

outer log: NodeList[head, body]  ---  top.html (line 6)
outer log: 2                     ---  top.html (line 7)
outer log: ""                    ---  top.html (line 8)

// console log from ifram.html after click button in 

inner log: NodeList[head, <TextNode textContent="\n">, body]  ---  iframe.html (line 6)
inner log: 3                                                  ---  iframe.html (line 7)
inner log: "Child iFrame"                                     ---  iframe.html (line 8)

// top.html

<html>
<body>
<iframe id="fid" src="/iframe.html"></iframe>
<script type="text/javascript">
  var i = document.getElementById("fid");
  console.log("outer log: %o", i.contentDocument.documentElement.childNodes);
  console.log("outer log: %o", i.contentDocument.documentElement.childNodes.length);
  console.log("outer log: %o", i.contentDocument.documentElement.childNodes[1].innerHTML);
</script>
</body>
</html>

// iframe.html

<html>
<head>
<script type="text/javascript">
function show () {
  var x = window.top.document.getElementById("fid");
  console.log("inner log: %o", x.contentDocument.documentElement.childNodes);
  console.log("inner log: %o", x.contentDocument.documentElement.childNodes.length);
  console.log("inner log: %o", x.contentDocument.documentElement.childNodes[2].childNodes[1].innerHTML);
}
</script>
</head>
<body>
<p>Child iFrame</p>
<input type="button" onclick="show()" value="Show Button" />
</body>
</html>

Thanks

Solution

  • Add testing into window.onload, result is as expected.