gpt4 book ai didi

javascript - Firefox 中的 `ImportNode` 并从 `iframe` 中提取元素

转载 作者:行者123 更新时间:2023-11-28 01:23:37 25 4
gpt4 key购买 nike

我正在尝试使用以下示例理解 html 中的 importNode

假设我们有一个content.html:

<html>
<body>
<nav id="sidebar1" class="sidebar">
Hi there!
</nav>
</body>
</html>

和一个main.html:

<html>
<body>
<iframe src='content.html' hidden='true'></iframe>
<script>
var idframe = document.getElementsByTagName("iframe")[0];
var oldNode = idframe.contentWindow.document.getElementsByTagName("nav")[0];
var newNode = document.importNode(oldNode, true);
document.getElementsByTagName("body")[0].appendChild(newNode);
alert("HI!!!");
</script>
</body>
</html>

我收到错误:

TypeError: Argument 1 of Document.importNode is not an object.
var newNode = document.importNode(oldNode, true);

从 iframe 获取元素并将其插入到我的 html 中的正确方法是什么?

最佳答案

您只能在加载 iframe 文档后访问 iframe 文档的内容。这可以通过不同的方式完成:

  • 将您的访问代码放入主(包含 iframe 元素)文档窗口的 load 处理程序中,
  • 或在 DOMContentLoaded 事件监听器中加载到 iframe 中。

下面是使用主文档windowload事件的例子:

window.addEventListener('load', function() {
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.body.insertBefore(newNode, document.body.firstChild);
}, false);

否则,当您尝试访问它时,iframe 内容尚未加载。

参见 live example在 JSFiddle(iframe 内容被编码放置在 iframesrcdoc 属性中,只是因为我不知道在 JSFiddle 上创建子文档的能力而无需创建单独的 fiddle )。

关于javascript - Firefox 中的 `ImportNode` 并从 `iframe` 中提取元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32924710/

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