如何定位、激活目标iframe并通过编程修改其内容

目标iframe是CKEditor富文本编辑器的编辑区，属于懒加载渲染节点：

• 页面初始加载阶段不会挂载这个iframe，只有编辑器被激活（你点击父节点的动作就是触发编辑器初始化、挂载DOM的操作），iframe才会被插入DOM树
• 代码执行时机早于iframe挂载时间，遍历DOM自然只能拿到提前加载的2个静态iframe，找不到目标节点

方案1：监听DOM变动，等目标iframe挂载后再执行操作 #

用MutationObserver监听DOM节点变化，一旦检测到目标iframe插入并加载完成，自动执行修改逻辑，不需要手动点击触发：

// 监听目标父容器挂载
const parentObserver = new MutationObserver((mutations) => {
  const targetParent = document.getElementById('cke_355_contents');
  if (targetParent) {
    parentObserver.disconnect();
    // 监听父容器下iframe的插入
    const iframeObserver = new MutationObserver(() => {
      const targetIframe = targetParent.querySelector('iframe');
      if (targetIframe) {
        iframeObserver.disconnect();
        // 封装iframe内容写入逻辑
        const writeContent = () => {
          const doc = targetIframe.contentWindow.document;
          doc.open();
          doc.write('<html><body>Hello World</body></html>');
          doc.close();
        };
        // 等iframe加载完成再操作，避免拿不到contentWindow
        if (targetIframe.contentDocument.readyState === 'complete') {
          writeContent();
        } else {
          targetIframe.addEventListener('load', writeContent, { once: true });
        }
      }
    });
    iframeObserver.observe(targetParent, { childList: true, subtree: true });
  }
});
// 从页面根节点开始监听DOM变动
parentObserver.observe(document.body, { childList: true, subtree: true });

方案2：调用CKEditor官方API操作内容（推荐） #

CKEditor本身提供了标准的内容读写方法，不需要手动查找操作iframe，完全不受DOM懒加载逻辑影响，也不会和编辑器内部状态冲突：

function setEditorContent() {
  if (!window.CKEDITOR) {
    setTimeout(setEditorContent, 500);
    return;
  }
  // 遍历所有编辑器实例，匹配目标容器
  for (const instanceName in CKEDITOR.instances) {
    const editor = CKEDITOR.instances[instanceName];
    if (editor.container?.getId() === 'cke_355_contents') {
      editor.setData('<p>Hello World</p>');
      return;
    }
  }
  // 实例未初始化完成则间隔重试
  setTimeout(setEditorContent, 500);
}
setEditorContent();

• 不要在页面刚加载时立刻执行动态节点查询，这类懒加载节点此时还未挂载，查询必然返回空
• 操作iframe内容前必须确认iframe和其内部文档加载完成，否则会出现contentWindow为null或者权限报错
• CKEditor编辑区iframe默认和主页面同域，不存在跨域操作限制，如果是第三方跨域iframe则无法直接修改内部内容

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