Question

我可能是错的，但关于iframe，我知道的就是这个 - 在iframe中它创建了它自己的文档对象。但是我很少有其他人混淆。 w3school's example says :

var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
y.body.style.backgroundColor = "red";

在说明中，contentDocument重新编译文档 iframe元素生成的对象。

如果是这样，那么为什么我们需要获得y.document的访问权限。我想说的是，如果x.contentDocument返回文档对象，那么为什么我们需要x.contentDocument.document来获得完整的对象。任何人都可以解释这个的实际 树结构 吗？

如果它是一个文档对象，那么为什么我在尝试提取放置在iframe中的div元素的innerHTML时出错？

<html>
<body>
<iframe style='bordre:1px solid black;width:100px;height:100px;' id='myframe'><div id='mydiv'>lol</div>></iframe>
<script>
    var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
console.log(y.document.getElementById('mydiv').innerHTML);
</script>
</body>
</html>

Answer 1

您需要拥有2个单独的html文件。我们会将其称为parent.html和child.html。对于此示例，这两个文件将位于相同的域和子域中。

位置

虽然这个简单的树结构将两个文件都作为兄弟，但是当我们使用iframe时，带有iframe的文件称为父文件，iframe中的文件称为子文件。

parent.html

    <!Doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Parent</title>
    </head>
    <body>

    <!--| border is spelled wrong, missing `src` attribute, there's an extra `>` at the end of the non-existent div |--> 
    <!--<iframe style='bordre:1px solid black;width:100px;height:100px;' id='myframe'><div id='mydiv'>lol</div>></iframe>--> 

    <!--| This is the proper way to create an iframe |-->
        <iframe id="myframe" name="myframe" scrolling="no" src="http://arcx.s3.amazonaws.com/demo1/child.html" style="border:1px solid black;width:100px;height:100px;">Anything inbetween the iframe tags will appear if the browser cannot render the iframe properly, so if the iframe is done correctly, anything here will never get rendered</iframe>
        <script>
/* When the iframe is loaded, get Child's #mydiv HTML content and log it to the console */
            var iFrame = document.getElementById("myframe"); // Reference to iframe
            iFrame.onload = function() {
                var childWin = iFrame.contentWindow, // Reference to child.html window 
                        target = childWin.document.getElementById('mydiv'), // Reference to child's div
                     /* target =  childWin.document.querySelector('div'), */// Alternate reference to child's div
                        content = target.innerHTML; // Get div's content
                console.log(content);
            }
        </script>
    </body>
    </html>

child.html

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Child</title>
    <style>
        #mydiv { outline: 2px dashed red; background: black; width: 84px; height: 84px; font: 900 32px/1.5 Consolas; text-align: center; color: red; margin: 2px; }
    </style>
</head>
<body>
    <div id="mydiv">LOL</div>
</body>
</html>

这里是Tutorial

iframe文档的实际树结构

1 个答案:

位置

parent.html

child.html