' ImportNode '和从' iframe '中提取元素

`ImportNode` in Firefox and extracting an element from an `iframe`

本文关键字：提取 元素 和从 ImportNode iframe      更新时间：2023-09-26

我正在尝试使用以下示例来理解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处理程序，
  • 或在iframe中加载的文档的DOMContentLoaded事件监听器中。

下面是使用主文档window的load事件的示例:

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内容时，它尚未加载。

请参阅JSFiddle中的实时示例(iframe内容被编码在iframe的srcdoc属性中，因为我不知道在JSFiddle中创建子文档而不创建单独的fiddle的能力)。

相关文章：