Firefox中console.log(iframe)与console.log(iframe.contentWindow)的输出差异

先看看你用到的代码：

HTML代码 #

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

JavaScript代码 #

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

为什么两次打印的contentWindow不一样？这其实是Firefox控制台的延迟求值机制在作祟：

• 当你打印content这个DOM元素时，控制台并不会立刻把所有属性的快照都展示出来。它只会先显示一个可折叠的元素结构，等你点击展开它的那一刻，才会去实时读取当前元素的contentWindow属性值。这时候iframe大概率已经完成加载了，所以你看到的是正常的window对象。
• 而直接打印content.contentWindow时，代码执行到这一行的瞬间就会获取这个属性的当前值。DOMContentLoaded事件触发的时机是当前页面的DOM加载完成，但iframe的内容加载是独立的——这时候iframe可能还在加载过程中，contentWindow还没完全初始化好，所以打印出来的结果和你后来展开元素时看到的不一样。

如果是跨域的iframe，这个差异会更明显：直接打印content.contentWindow会因为浏览器的同源策略限制，返回null或者受限的对象；但展开DOM元素时，控制台作为浏览器内部环境，可能能展示一些基础的window结构（不过实际访问还是会被限制）。

内容的提问来源于stack exchange，提问作者codekandis