Question

我了解如何修改console.log函数以拦截日志并将其推送到数组中。但是，这似乎不适用于所有控制台日志。在我的html中，我加载了一个html webapp（\creative\300x600 with video\index.html），该应用程序也执行了一个console.log("click detected")，我可以在chrome开发工具中看到它，但未被控制台捕获。 ogs（代码示例中的第二个脚本）。我怀疑因为这是一个正在加载的外部文件，所以无法拦截它。

是否有解决方案可以从任何来源获取所有console.log并将其保存？

<!DOCTYPE html>
<head>
<script>

//add index.html to div on click

function load_home() {
    console.log("Loaded");
    document.getElementById("content").src='creative\\300x600 with video\\index.html';

}
window.addEventListener("click",load_home);
</script>
<script>

//modify console.log

console.defaultLog = console.log.bind(console);
console.logs = [];
console.log = function() {
    console.defaultLog.apply(console, arguments);
    console.logs.push(Array.from(arguments));
};
    </script>
</head>
<html>
<iframe id="content" style="width: 300px; height:600px; background-color:blue"  ></iframe>
</body>
</html>

编辑：

试图使其在div而不是iframe上，同样的问题是无法记录外部html的console.log。 load_home函数中只有console.log("loaded")被记录。

<!DOCTYPE html>
<head>

<script>
function load_home() {
    console.log("Loaded");
     document.getElementById("content").innerHTML='<object type="text/html" data="creative\\300x600 with video\\index.html" ></object>';


}
window.addEventListener("click",load_home);
</script>
<script>
console.defaultLog = console.log.bind(console);
console.logs = [];
console.log = function() {
    console.defaultLog.apply(console, arguments);
    console.logs.push(Array.from(arguments));
};
    </script>
</head>
<html>


<div id="content" style="width: 300px; height:600px; z-index:-1;" ,"onclick=load_home();" </div>

</body>
</html>

Answer 1

这里的问题是因为iframe。 iframe个对象有一个不同的window对象，独立于父级的window对象。这意味着您对父级window.console所做的任何修改都不会影响iframe的window.console。

您可以通过contentWindow获取框架的window对象并修改其console。但是您必须为每个当前和将来的 iframe执行此操作。此外，您无法从其他域访问呈现页面的iframe的contentWindow。

如果您试图捕获所有框架的日志，并以某种方式将它们合并为一个大日志，则更好的选择是在要跟踪的每个页面上都使用相同的console更改脚本。然后将所有日志按时间戳等顺序发送到服务器。 Sentry的工作方式差不多。

如何从外部来源捕获console.log？

1 个答案: