（Firefox？）`console.log（iframe）`+检查`contentWindow`与`console.log（iframe.contentWindow）`之间的区别-不同的输出答案

【问题标题】：(Firefox?) Difference between `console.log( iframe )` + inspecting `contentWindow` vs `console.log( iframe.contentWindow )` - different outputs（Firefox？）`console.log（iframe）`+检查`contentWindow`与`console.log（iframe.contentWindow）`之间的区别-不同的输出
【发布时间】：2018-03-18 18:47:37
【问题描述】：

考虑如下的 HTML 文档

<div id="foobar"></div>
<iframe id="content" src="https://example.com/someUri"></iframe>

Furtheron 考虑如下的 JavaScript

document.addEventListener( 'DOMContentLoaded', function ( event ) {
    var content = document.querySelector( '#content' );
    console.log( content );
    console.log( content.contentWindow );
} );

在检查content 的第一个控制台输出时，元素的contentWindow 属性将显示为一个窗口元素，该元素基于与iFrame 的src 属性中指定的相同URI。但是第二个控制台输出显示了一个基于 URI about:blank 的窗口元素。

如标题中所述，我使用的是 FireFox (59.0.1 x64)。

我愿意接受，但我想知道为什么？

【问题讨论】：

标签： javascript firefox iframe console.log

【解决方案1】：

其实这个问题是基于DOMContentLoaded不等待iFrame内容被加载。

为了使contentWindow 的输出基于主文档完全加载时的空白页。事实上，iFrame 本身的输出会在同一时刻的检查权中显示相同的结果。

但是

控制台会在每次更改时立即更新 iFrame 的输出，但不会针对 contentWindow 属性的单个日志。虽然更新速度如此之快，但人们无法简单地识别控制台中的更改，并且可能会像我一样首先假设存在问题。

编辑 (2018-03-20)

同时我发现，在加载src 中传递的内容之前，iFrame 首先包含一个虚拟对象。

【讨论】：