如何从父页面获取iframe内的CodeMirror实例并初始化内容

我看你遇到的核心问题是：当你打开模态框调用iframe里的CodeMirror方法时，iframe内的CodeMirror实例可能还没完成初始化——毕竟iframe的window.onload要等它自身的资源（包括CodeMirror的脚本）加载完成后才会执行，而你触发openCodeMirror的时机大概率早于这个节点，自然就会调用失败。

下面给你几个可行的修复方案，一步步来：

方案1：确保iframe加载完成后再调用方法 #

最简单的方式是给iframe绑定load事件，确认它内部的CodeMirror已经初始化完毕，再执行设置内容的操作。

修改parent.html的代码 #

在openCodeMirror函数里，我们先判断iframe是否已经加载完成，如果没有，就监听它的load事件再执行逻辑：

function openCodeMirror(){
  var modal = document.getElementById("cmModal");
  modal.style.display = "block";
  var iframe = document.getElementById("cmIframeId");
  let textarea = document.getElementById("source");
  
  // 定义设置内容的逻辑
  function setCmContent() {
    // 优先调用你在iframe里定义的setCode方法，更规范
    if (iframe.contentWindow.setCode) {
      iframe.contentWindow.setCode(textarea.value);
    } else if (iframe.contentWindow.codeMirrorEditor) {
      iframe.contentWindow.codeMirrorEditor.setValue(textarea.value);
    }
  }

  // 检查iframe是否已经加载完成
  if (iframe.contentWindow.document.readyState === "complete") {
    setCmContent();
  } else {
    // 如果没加载完，监听load事件后再执行
    iframe.addEventListener('load', function() {
      setCmContent();
      // 只执行一次，避免重复绑定
      this.removeEventListener('load', arguments.callee);
    });
  }

  // 关闭按钮逻辑保持不变
  var span = document.getElementsByClassName("close")[0];
  span.onclick = function() {
    modal.style.display = "none";
  }
}

修复codemirror.html的小问题 #

你写的setCode函数里多了一个多余的分号，先修正它：

window.setCode = function(content) {
  // 去掉多出来的分号
  codeMirrorEditor.setValue(content);
}

方案2：让iframe主动通知父页面已就绪 #

如果需要更可靠的控制，可以让iframe在CodeMirror初始化完成后，主动给父页面发送消息，父页面收到消息后再执行设置内容的操作。

修改codemirror.html的脚本 #

在window.onload里添加通知逻辑：

window.onload = function () {
  codeMirrorEditor = CodeMirror(document.getElementById("code"), {
    mode: "text/html",
    styleActiveLine: true,
    lineNumbers: true,
    lineWrapping: true,
    autoCloseTags: true,
    theme: "night",
    value: getOwnSource(),
  });
  // 初始化完成后，给父页面发消息
  window.parent.postMessage({ type: 'cmReady' }, '*');
};

修改parent.html的脚本 #

添加消息监听，并在收到就绪通知后设置内容：

let cmReady = false;
// 监听iframe发来的消息
window.addEventListener('message', function(e) {
  if (e.data.type === 'cmReady') {
    cmReady = true;
  }
});

function openCodeMirror(){
  var modal = document.getElementById("cmModal");
  modal.style.display = "block";
  var iframe = document.getElementById("cmIframeId");
  let textarea = document.getElementById("source");
  
  function setCmContent() {
    if (iframe.contentWindow.setCode) {
      iframe.contentWindow.setCode(textarea.value);
    }
  }

  // 如果已经就绪直接设置，否则等消息
  if (cmReady) {
    setCmContent();
  } else {
    // 临时监听一次消息，设置后移除
    const messageHandler = function(e) {
      if (e.data.type === 'cmReady') {
        setCmContent();
        window.removeEventListener('message', messageHandler);
      }
    }
    window.addEventListener('message', messageHandler);
  }

  // 关闭按钮逻辑
  var span = document.getElementsByClassName("close")[0];
  span.onclick = function() {
    modal.style.display = "none";
  }
}

额外注意事项 #

• 确保你的CodeMirror脚本已经正确引入到codemirror.html中，避免因为脚本加载失败导致codeMirrorEditor未定义。
• 因为是同一域名下的页面，无需担心跨域问题；如果后续涉及跨域，需要调整postMessage的目标域名参数。
• 可以在调用前加个判断，比如if (iframe.contentWindow && iframe.contentWindow.codeMirrorEditor)，避免控制台报错。

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