如何让iframe直接加载已有Document实例而非复制内容？

很遗憾，答案是不行——浏览器的安全与隔离机制从根本上限制了这一点。每个iframe（哪怕是同域的）都会拥有自己独立的「浏览上下文」（browsing context），而每个浏览上下文必然对应一个唯一的Document对象，它们之间是完全隔离的，无法直接共享同一个实例。

你当前使用的open()/write()/close()方法本质上是把原Document的HTML内容复制到iframe的独立Document中，两者之后就是毫无关联的两个DOM树，所以修改原doc不会同步到iframe里。

不过别担心，我们可以通过其他方式实现「修改一处，多iframe同步更新」的需求，这里给你几个实用方案：

方案1：用MutationObserver监听DOM变化并同步 #

你可以在原Document上挂载一个MutationObserver，监听所有DOM结构、属性、文本的变化，然后把这些变化同步到每个iframe的Document中。

示例代码大概是这样：

// 假设我们有多个iframe的集合
const iframes = document.querySelectorAll('.shared-iframe');
const targetDoc = doc; // 你的目标Document实例

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  // 遍历所有变化，同步到每个iframe
  iframes.forEach(iframe => {
    const iframeDoc = iframe.contentDocument;
    // 简单粗暴的同步方式（适合小型内容）
    iframeDoc.open();
    iframeDoc.write(targetDoc.documentElement.innerHTML);
    iframeDoc.close();
    // 更精细的方式可以逐个应用mutation（性能更好）：
    // mutations.forEach(mutation => {
    //   switch(mutation.type) {
    //     case 'childList':
    //       // 处理节点增删
    //       break;
    //     case 'attributes':
    //       // 处理属性修改
    //       break;
    //     // 其他类型按需处理
    //   }
    // });
  });
});

// 配置观察选项（根据需求调整）
const config = { 
  attributes: true, 
  childList: true, 
  subtree: true,
  characterData: true
};

// 启动观察
observer.observe(targetDoc.documentElement, config);

方案2：维护单一数据源，驱动多iframe渲染 #

如果你的内容是动态生成的，可以把核心数据抽离成独立的JS对象/状态，然后让所有iframe基于这个数据源渲染内容。比如用前端框架（React、Vue）的话，可以把状态放在全局共享的store里，每个iframe加载的组件都订阅这个状态，状态更新时自动重新渲染。

举个简单的原生JS例子：

// 全局共享数据源
const sharedState = { content: '初始内容' };
const iframes = document.querySelectorAll('.shared-iframe');

// 更新数据源并同步所有iframe
function updateSharedContent(newContent) {
  sharedState.content = newContent;
  iframes.forEach(iframe => {
    // 调用iframe内部的更新方法
    iframe.contentWindow.updateContent(newContent);
  });
}

// 每个iframe内部需要提前定义好更新方法：
// （iframe内的代码）
function updateContent(content) {
  document.body.textContent = content;
  // 复杂内容可以根据数据源重新渲染DOM结构
}

方案3：使用iframe的srcdoc属性动态更新 #

如果你的内容可以序列化为HTML字符串，每次原Document修改时，重新生成HTML并更新所有iframe的srcdoc属性：

function syncIframes() {
  const html = doc.documentElement.innerHTML;
  iframes.forEach(iframe => {
    iframe.srcdoc = html;
  });
}

// 你可以在修改原doc后手动调用syncIframes，或者结合MutationObserver自动触发

这些方案虽然不是直接共享Document实例，但都能满足你「一处修改，多iframe同步」的核心需求。

内容的提问来源于stack exchange，提问作者bamia