Javascript 如何从iframe从控制台捕获日志？_Javascript_Html_Iframe_Console.log

Javascript 如何从iframe从控制台捕获日志？

javascript html iframe

Javascript 如何从iframe从控制台捕获日志？,javascript,html,iframe,console.log,Javascript,Html,Iframe,Console.log,我想在控制台中获取来自iFrame标记的日志，并将其显示在另一个元素中 window.console = { log: function(str){ let node = document.createElement("li"); node.appendChild(document.createTextNode(str)); document.getElementById("consoleMsgHere&quo

我想在控制台中获取来自iFrame标记的日志，并将其显示在另一个元素中

window.console = {
    log: function(str){
        let node = document.createElement("li");
        node.appendChild(document.createTextNode(str));
        document.getElementById("consoleMsgHere").appendChild(node);
    }
}

此代码能够从文档中获取通用控制台，但无法从iframe标记捕获日志

非常感谢您的帮助。

这是一个非常基本的示例。遗憾的是，由于iframe的限制，我无法提供代码片段。因此，这更像是一个复制到dekstop的示例

基本上，我将您的

log（）

更改为

window.top.postMessage（）

，并在

window.top

上添加了一个处理传入消息的侦听器。有关详细信息，请参阅

<html>
    <head>
        <script>
            //REM: Overwriting console.log()
            window.console = {
                log: function(str){
                    //REM: Forward the string to the top window.
                    //REM: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
                    window.top.postMessage(str, '*');
                }
            };

            //REM: Listening to messages
            window.addEventListener('message', function(event){
                //REM: Just appending it to the body.. lazy
                document.body.appendChild(document.createTextNode(event.data))
            }, false);

            //REM: Just required for the demo..
            window.onload = function(){
                if(window.top !== window.self){
                    //REM: Changing the color of the body to distinguish iframe and not iframe
                    document.body.style.background = 'limegreen'
                }
                else{
                    //REM: Adding itself as an iframe to demostrate the logic while being lazy
                    document.body.appendChild(document.createElement('iframe')).src = window.location.href
                }
            }
        </script>
    </head>

    <body>
        <input type = 'text' value = 'test' onchange = 'console.log(this.value)' />
    </body>
</html>


//REM：覆盖console.log（）
window.console={
日志：函数（str）{
//REM：将字符串转发到顶部窗口。
//雷姆：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
window.top.postMessage（str，'*'）；
}
};
//雷姆：听信息
window.addEventListener（'message'，函数（事件）{
//雷：只是把它附在身体上……懒惰
document.body.appendChild（document.createTextNode（event.data））
}，假）；
//雷姆：只是演示需要。。
window.onload=函数（）{
if（window.top！==window.self）{
//REM：改变身体的颜色以区分iframe和not iframe
document.body.style.background='limegreen'
}
否则{
//REM：将自身添加为iframe，以演示逻辑，同时保持懒惰
document.body.appendChild（document.createElement（'iframe'））.src=window.location.href
}
}

可能需要

window.top.document.getElementById（“consoleMsgHere”）.appendChild（节点）

，否则

iframe

将独立于

文档。根据域限制，这可能是不可能的。似乎没有可能的方法：（如果您对这两个站点都有控制权，您可以使用postMessage（）
转发它，不考虑域。是的！我可以控制双方。实际上，我正在制作一个代码编辑器，用户可以在其中编写JavaScript，并显示在iframe内部。您能否简单地解释一下如何使用postMessage（）
修复我的问题？在这种情况下，您可以使用。更改日志（）
至postMessage（）
至窗口。顶部
并在顶部窗口上添加一条receiveMessage
。这样它将从顶部和子（=iframe）站点获取消息。如果n
是用户的长且不可预测的代码，那么有没有办法更改所有console.log（“消息”）
到window.top.postMessage（“message”、“*”）；
？顺便说一句，我正在使用ace。你可以在你的帖子和我的示例中看到方法。我们只是覆盖window.console.log（）
。什么是ace？：-）你为什么要放；代码中的before窗口（在事件侦听器之前）？？处理外部脚本绑定器和/或脚本缩微器时的习惯，因为您永远不知道它们是否以结尾。您可以在这里完全忽略它。您可以看到我的onchange
正在执行一个console.log（）
，它在开始时被覆盖为postMessage（）
。因此，您只需像原始示例中那样覆盖函数一次（在每个页面上）。