【问题标题】:Capture console log of an iframe捕获 iframe 的控制台日志
【发布时间】:2013-02-02 04:17:34
【问题描述】:

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

我正在开发类似于 jsFiddle 的 online IDE,我想让用户选择至少阅读 javascript 控制台的结果。

【问题讨论】:

  • 你可以按照here的建议覆盖console.log
  • 不会在 iframe 的内容中打印结果吗?我想在 iframe 容器主体内的 div 中打印控制台日志

标签: javascript iframe console


【解决方案1】:

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

【讨论】:

  • 答案确实离题了,目标是在代码中捕获日志,并且在运行时,这应该在每个人的机器上运行,而不仅仅是开发人员的机器。
  • 我一直在寻找这个答案。出于某种原因,需要重新加载页面才能使更改生效。 +1
【解决方案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);
});

【讨论】:

    【解决方案3】:

    如果你想在窗口容器的主体内打印日志消息,可以在那里声明面板:

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

    【讨论】:

    • 嗨,谢谢它按预期工作,但你能解释一下这条线的作用吗? panel: $(parent.document.body).append('&lt;div&gt;'),,我不明白为什么我们使用.append('div') 部分。
    • 这只是为了将消息包装成一个div。您也可以使用panel: $(parent.document.body),但随后您会将每条消息直接作为容器主体的子项。
    • 是的,过了一会儿我明白了它的目的并修改了它以满足我的需要,感谢您花时间向我解释。
    猜你喜欢
    • 1970-01-01
    • 2019-04-19
    • 2015-10-22
    • 1970-01-01
    • 1970-01-01
    • 2013-08-18
    • 2017-03-06
    • 1970-01-01
    相关资源
    最近更新 更多