捕获 iframe 的控制台日志

Question

有没有办法在 iframe 之外捕获控制台？

我正在开发一个类似于 jsFiddle 的在线 IDE，我想让用户选择至少读取 javascript 控制台的结果。

Answer 1

如果您想在窗口容器体内打印日志消息，可以在那里声明面板：

var console = {
    panel: $(parent.document.body).append('<div>'),
    log: function(m){
        this.panel.prepend('<div>'+m+'</div>');
    }       
};
console.log('message');

Answer 2

如果您不想附加到 HTML，这里是另一个解决方案

var console = {
  __on : {},
  addEventListener : function (name, callback) {
    this.__on[name] = (this.__on[name] || []).concat(callback);
    return this;
  },
  dispatchEvent : function (name, value) {
    this.__on[name] = (this.__on[name] || []);
    for (var i = 0, n = this.__on[name].length; i < n; i++) {
      this.__on[name][i].call(this, value);
    }
    return this;
  },
  log: function () {
    var a = [];
    // For V8 optimization
    for (var i = 0, n = arguments.length; i < n; i++) {
      a.push(arguments[i]);
    }
    this.dispatchEvent("log", a);
  }
};

iframe 之外

iframe.contentWindow.console.addEventListener("log", function (value) {
  console.log.apply(null, value);
});

Answer 3

您可以使用 Chrome 开发工具。有一个 Javascript 选择器“Top”，您可以在其中选择源。来自该源的日志将会显示。

Answer 4

您可以使用

window.parent

属性从 iframe 中访问父窗口的控制台。

// from within the iframe:
parent.console.log('Hello World');

这将在父窗口的控制台中输出。

您可以在这里阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/API/Window/parent