如何使用 javascript 在 iframe 中获取控制台消息?
How to get console messages in iframe with javascript?
我已经完成了所有其他问题,但其中 none 有效。我正在尝试在下面的代码块上执行此操作。如何从 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('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>
您可以在iframe js代码中添加以下内容。这将用自定义日志方法替换原始 window.console.log
,该方法还将数据发送到 parent 框架。
const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};
并且在您的 parent 中您可以收听这些 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('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>
我已经完成了所有其他问题,但其中 none 有效。我正在尝试在下面的代码块上执行此操作。如何从 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('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>
您可以在iframe js代码中添加以下内容。这将用自定义日志方法替换原始 window.console.log
,该方法还将数据发送到 parent 框架。
const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};
并且在您的 parent 中您可以收听这些 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('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>