javascript - (Firefox？) `console.log( iframe )` + 检查 `contentWindow` 与 `console.log( iframe.contentWindow )` 之间的差异 - 不同的输出

Question

考虑如下 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)。

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

Answer 1

实际上这个问题是由于 DOMContentLoaded 没有等待 iFrame 内容加载而导致的。

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

但是

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

<小时/>

编辑(2018-03-20)

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