gpt4 book ai didi

javascript - iframe 文档的实际树结构

转载 作者:太空宇宙 更新时间:2023-11-04 11:37:03 26 4
gpt4 key购买 nike

我可能是错的,但关于 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";

in the explanation it says ,contentDocument retruns the document object generated by iframe element.

如果是这样,那么为什么我们需要使用 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>

最佳答案

您需要有 2 个单独的 html 文件。我们称它们为 parent.htmlchild.html。对于此示例,这 2 个文件将位于相同的域和子域中。

地点

虽然这个简单的树结构将两个文件视为兄弟文件,但当我们使用 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

关于javascript - iframe 文档的实际树结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31666231/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com