有没有办法在不复制的情况下用另一个替换 iframe 的文档？答案

【问题标题】：Is there a way to replace an iframe's document with another without copying?有没有办法在不复制的情况下用另一个替换 iframe 的文档？
【发布时间】：2020-04-29 12:18:30
【问题描述】：

我有一个 iframe ifr 和一个文档 doc。我想使用加载的文档设置 iframe 的内容/文档。

我现在拥有的是：

ifr.contentDocument.open();
ifr.contentDocument.write(doc.documentElement.innerHTML);
ifr.contentDocument.close();

这样做的目的是将 HTML 中的文档内容复制到 iframe 的文档中。

我想要的是让 iframe 显示加载的文档而不复制它。在这种情况下，另一个 iframe 可以显示相同的文档实例，并且任何修改都将在两个 iframe 中完成。

这在 JavaScript 中是否可行？

【问题讨论】：

不，这不可能，每个 iframe 都有自己的浏览上下文，并且在浏览上下文之间共享文档是不可能的。
@Teemu 好的，是否可以共享至少一个节点？例如，<html> 根节点？
不，这也不可能，一个节点只能有一个父元素。不过，您可以在没有 document.write 的情况下使用 clone nodes。
好的，我可能找到了解决方案，我正在尝试创建多个 iframe 并在父节点中替换它们。问题是，iframe 在创建时既没有窗口也没有文档。必须将它们添加到窗口中才能初始化所有内容。有没有办法我可以做到这一点？顺便说一句，我尝试了<object> 并遇到了同样的问题。
@bsella 见我的answer 它完全依赖于默认的 HTML 行为，没有 JavaScript，虽然有 CSS，但它完全是可选的。

标签： javascript iframe document

【解决方案1】：

您可以尝试将 HTML 代码保存在浏览器存储中，并在窗口和框架之间自动同步

【讨论】：

【解决方案2】：

以下技术也适用于同一域中的页面。无需克隆的网页编辑可以通过移动页面来完成。如果您对此感兴趣，请告诉我，我会相应地更新此答案。

将[name] 属性添加到<iframe>。
```
 <iframe name=''...></iframe>
```
为<iframe> 中的[name] 分配任意值。
```
 <iframe name='portal'...></iframe>
```
添加<a>nchor。
```
 <a href=''...></a>
```

将 url 分配给 [href] 的 <a>。

 <a href='//example.com'...>Example</a>

将[target] 添加到<a>。

 <a href='//example.com' target=''...>Example</a>

将<iframe> 的[name] 值分配给<a> 的[target]。
```
 <a href='//example.com' target='portal'...>Example</a>
```

演示

注意： SO 会阻止 YouTube，因此请查看此 Fiddle 以获得完整功能的演示

:root,
body {
  font: 700 small-caps 3vw/1.5 Verdana, sans-serif;
}

main {
  width: 95%;
  margin: 0 auto;
}

iframe {
  display: block;
  margin: 0 auto;
}

nav {
  width: 99%;
  margin: 0 auto;
  border: 1px solid #000;
}

ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  margin: 0 auto;
}

li {
  width: 33%;
  text-align: center;
}

<main>
  <nav>
    <ul>
      <li>
        <a href='//example.com' target='portal'>Example</a>
      </li>
      <li>
        <a href='//player.vimeo.com/video/411293670' target='portal'>Vimeo</a>
      </li>
      <li>
        <a href='//www.youtube.com/embed/4r7wHMg5Yjg' target='portal'>YouTube</a>
      </li>
    </ul>
  </nav>
  <iframe name='portal' src='about:blank' width="560" height="315" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</main>

【讨论】：