时间戳

首页 > 解决方案 > 如何使用 javascript 在 iframe 中获取控制台消息？

javascript - 如何使用 javascript 在 iframe 中获取控制台消息？

问题描述

我已经解决了所有其他问题，但没有一个有效。我正在尝试在下面的代码块上执行此操作。如何从 iframe 中获取控制台消息？我可以从 iframe 外部获取它，但我无法将 iframe 内的控制台消息添加到 html。我在添加脚本标签时遇到了一些麻烦。

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 js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
  let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
    let cdo =`${html} <style>${css}</style> ${jsa}`
    var iframe = document.createElement('iframe');
    iframe.classList.add('iframe-css');
    iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
    if (document.querySelector(`.${cls} iframe`)) {
        document.querySelector(`.${cls} iframe`).remove();
    }
    document.querySelector(`.${cls}`).appendChild(iframe);
}
main.main pre {
  display: block;
  background-color: #f6f6f6;
  color: #000;
  padding: 10px;
  max-height: 350px;
  overflow-y: scroll;
  margin: 0;
  border: 1px solid #212121;
}

main.main code {
  background-color: #f6f6f6;
  margin: 0;
  padding: 0;
  color: #000;
  padding: 0px 5px;
}

.main pre code {
  padding: 0;
  margin: 0;
  word-break: break-all !important;
}

.info-r-h {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #212121;
  border-bottom: 2px solid #212121;
  padding-top: 2px;
  padding-bottom: 2px;
}

.info-r-h button {
  padding: 10px 20px;
  background-color: #212121;
  color: #fff;
  outline: none;
  border: none;
  border-right: 2px solid #fff;
  border-left: 2px solid #fff;
  cursor: pointer;
}

.code-run-button {
  display: block;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 20px;
  background-color: #0095ff;
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.iframe-css {
  display: block;
  width: 100%;
  border: 1px solid #212121;
  background-color: #fff;
  margin-top: 10px;
  height: auto;
}
<main class="main">
  <div class="code-run-1" id="1">
    <div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>

    <pre class="html-code-run-1" spellcheck="false">
                <code>asdasdasdas</code>
                      </pre>

    <div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>

    <pre class="css-code-run-1" spellcheck="false">
                <code>  *{
                                color:red;
                                }</code></pre>

    <div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>

    <pre class="javascript-code-run-1" spellcheck="false">
                <code>   console.log(&#39;asd&#39;);</code></pre>
    <button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
  <div class="denem"></div>
</main>

标签： javascriptconsole.log

解决方案

您可以将以下内容添加到 iframe js 代码中。这将使用自定义日志方法替换原始window.console.log方法，该方法也将数据发送到父框架。

const originalLog = console.log;
console.log = (...args) => {
  parent.window.postMessage({ type: 'log', args: args }, '*')
  originalLog(...args)
};

在您的父母中，您可以收听这些message事件：

window.addEventListener('message', e => {
  const data = e.data
  if (data.type === 'log') {
     console.log('received from child', data.args)
  }
})

所以这是一个工作示例：

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 js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
    js = `const originalLog = console.log;
          console.log = (...args) => {
            parent.window.postMessage({ type: 'log', args: args }, '*')
            originalLog(...args)
          };` + js
  let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
    let cdo =`${html} <style>${css}</style> ${jsa}`
    var iframe = document.createElement('iframe');
    iframe.classList.add('iframe-css');
    iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
    if (document.querySelector(`.${cls} iframe`)) {
        document.querySelector(`.${cls} iframe`).remove();
    }
    document.querySelector(`.${cls}`).appendChild(iframe);
}
window.addEventListener('message', e => {
  const data = e.data
  if (data.type === 'log') {
     console.log('received from child', data.args)
  }
})
main.main pre {
  display: block;
  background-color: #f6f6f6;
  color: #000;
  padding: 10px;
  max-height: 350px;
  overflow-y: scroll;
  margin: 0;
  border: 1px solid #212121;
}

main.main code {
  background-color: #f6f6f6;
  margin: 0;
  padding: 0;
  color: #000;
  padding: 0px 5px;
}

.main pre code {
  padding: 0;
  margin: 0;
  word-break: break-all !important;
}

.info-r-h {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #212121;
  border-bottom: 2px solid #212121;
  padding-top: 2px;
  padding-bottom: 2px;
}

.info-r-h button {
  padding: 10px 20px;
  background-color: #212121;
  color: #fff;
  outline: none;
  border: none;
  border-right: 2px solid #fff;
  border-left: 2px solid #fff;
  cursor: pointer;
}

.code-run-button {
  display: block;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 20px;
  background-color: #0095ff;
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.iframe-css {
  display: block;
  width: 100%;
  border: 1px solid #212121;
  background-color: #fff;
  margin-top: 10px;
  height: auto;
}
<main class="main">
  <div class="code-run-1" id="1">
    <div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>

    <pre class="html-code-run-1" spellcheck="false">
                <code>asdasdasdas</code>
                      </pre>

    <div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>

    <pre class="css-code-run-1" spellcheck="false">
                <code>  *{
                                color:red;
                                }</code></pre>

    <div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>

    <pre class="javascript-code-run-1" spellcheck="false">
                <code>   console.log(&#39;asd&#39;);</code></pre>
    <button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
  <div class="denem"></div>
</main>

推荐阅读