如何使用JavaScript获取iframe内部输出的console日志信息

以下修改可同时解决iframe内script注入失败、iframe console无法同步到外层两个问题：

1. 新增外层页面全局监听代码 #

先在你外层页面的任意script标签内添加如下代码，用于接收iframe传递的console消息：

// 监听iframe传递的console消息
window.addEventListener('message', (e) => {
  if (e.data?.type === 'iframe_console_log') {
    console[e.data.method](...e.data.args)
  }
})

2. 修改coderunfunc函数逻辑 #

把原来的coderunfunc替换为如下代码：

function coderunfunc(cls, ind) {
    let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
    let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
    let userJs = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
    // 注入iframe内部的console代理代码：重写console所有方法，把消息发给外层
    const consoleProxy = `
    <script>
    const originConsole = {...console}
    Object.keys(originConsole).forEach(method => {
      if(typeof originConsole[method] === 'function') {
        console[method] = (...args) => {
          originConsole[method](...args)
          window.parent.postMessage({
            type: 'iframe_console_log',
            method: method,
            args: args
          }, '*')
        }
      }
    })
    </script>
    `
    // 拼接用户JS代码，规避</script>字符串解析问题
    const userScript = `<script>${userJs}</scr` + `ipt>`
    // 拼接完整iframe内容
    const cdo = `${html} ${consoleProxy} <style>${css}</style> ${userScript}`
    const iframe = document.createElement('iframe');
    iframe.classList.add('iframe-css');
    // 用srcdoc属性替代data URL，兼容性更好，也避免编码问题
    iframe.srcdoc = cdo;
    if (document.querySelector(`.${cls} iframe`)) {
        document.querySelector(`.${cls} iframe`).remove();
    }
    document.querySelector(`.${cls}`).appendChild(iframe);
}

核心修改说明 #

• 替换data:text/html写法为srcdoc属性写入iframe内容，避免编码异常导致的script注入失败
• 提前在iframe内注入console代理代码，重写console所有方法，通过postMessage把日志同步到外层页面
• 修复了原来拼接script标签时的字符串解析错误问题
  原有CSS和HTML代码无需做任何修改，替换上述JS代码即可实现需求。

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