Javascript `Firefox中的ImportNode`并从`iframe'中提取元素`_Javascript_Html_Iframe_Import

Javascript `Firefox中的ImportNode`并从`iframe'中提取元素`

javascript html iframe import

Javascript `Firefox中的ImportNode`并从`iframe'中提取元素`,javascript,html,iframe,import,Javascript,Html,Iframe,Import,我试图用下面的例子理解html中的importNode 假设我们有一个content.html： <html> <body> <nav id="sidebar1" class="sidebar"> Hi there! </nav> </body> </html> <html> <body> <iframe src='content.html'

我试图用下面的例子理解html中的

importNode

假设我们有一个

content.html

：

<html>
  <body>
    <nav id="sidebar1" class="sidebar">
       Hi there!
    </nav>
  </body>
</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.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）；
}，假）；

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

请参阅at JSFIDLE（iframe内容被编码到

iframe

的

srcdoc

属性中，只是因为我不知道在JSFIDLE上创建子文档而不创建单独的小提琴的能力）。

没有

getElementByTagName（）

方法。@MaratTanalin这是问题吗？我想这让我很困惑。但第一行确实有效。@MaratTanalin元素。有时是最微小的事情

getElementsByTagName（）

返回类似数组的集合，而不是单个元素。您应该通过索引访问所需的项目，例如

getElementsByTagName（“nav”）[0]

@MaratTanalin抱歉。让我更新代码。让我看看我是否明白你在说什么。关于何时加载iframe和何时执行javascript，存在一个棘手的问题。对吗？因此，我应该将JavaScript放在iframe之后执行的某个点上。这是正确的吗？我不完全确定您的意思是说，

…

的位置是否相关。我将事件

窗口。addEventLis…

放在一个

..

内，在

iframe

之后。这是正确的吗？现在可以用了。谢谢但我也想了解关键的变化是什么。1）

…

的位置？2）代码在事件监听器中，而事件监听器是在页面加载后执行的？3）两者结合在一起？添加

load

事件监听器的代码通常放在何处并不重要（在文档完全加载后，监听器将被调用），但它通常放在

HEAD

元素中（作为JS代码或链接到外部脚本，如

），明白了吗。谢谢这是延迟importNode的标准方法吗，将其添加到事件中？似乎将html转换成html很麻烦。是的，通常的做法是使用

文档的DOMContentLoaded
（当只需要加载html和CSS时）和窗口的loade
（当需要加载所有页面资源时）等待页面内容或其嵌入的资源准备好使用。特别是对于帧，如果您真正需要的是从服务器检索一些数据，则通常不需要帧；是一种更现代、更实用、更受欢迎的方法。