Append Child 仅适用于 Iframe，cloneNode 无法解析

Question

我正在构建一个网络应用程序来显示来自环境 subreddit 的视频。文本和标题使用 Append Child 重复 OK，但视频 iframe 仅加载一次。

http://codepen.io/Teeke/pen/KWaYRe

这是我要重复的节点代码：

 node.innerHTML = `
   <h2 class="centered">
     <a href="${post.link}">
      <br>
     <iframe id="iframe-test" width="auto" height="auto" src="">
 </iframe>
<br>
      ${post.title} 
    </a>
  <br><br>
</h2>`;

我搜索了“append child only works once”并找到了两个来源。

• Append child only works once

• Using appendChild multiple times with the same node in JS

所以我尝试了来自第二个链接的以下内容。

 app.appendChild(node.cloneNode(true));

但它仍然对我不起作用。我不明白为什么js会克隆元素的其余部分而不是iframe。

Answer 1

你需要为你的新 i-frame 分配一个新的 id。

所以不要克隆对象，而是使用相同的 HTML 字符串创建一个新对象，但每次都更改 id。您可以使用 guid 或生成越来越多的数字来获得唯一 ID。