javascript - Append Child 仅第一次适用于 Iframe，cloneNode 无法解析

Question

我正在构建一个网络应用程序来显示来自 Reddit 环境 subreddit 的视频。使用附加子项可以重复文本和标题，但视频 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

• 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。