如何在Heap快照中识别Window对象对应的iframe及选中对象含义

如何匹配Window对象与对应iframe #

• 查看Window对象的frameElement属性：每个iframe的Window都会关联一个frameElement，这个属性指向对应的<iframe>DOM节点，通过节点的src、id或name属性就能直接定位到具体的iframe。
• 检查location属性：Window的location.href会显示该iframe的加载地址，和页面中各iframe的src做对比，就能快速对应上。
• 借助Retainers面板：在Heap快照里选中目标Window对象，切换到Retainers面板，向上追溯引用链，通常能找到包含该iframe的父级DOM节点或父Window的关联关系，以此定位所属iframe。

选中的Window对象代表什么 #

如果选中的Window对象没有关联的frameElement，那它基本就是主页面的全局Window对象——也就是你打开的主文档的顶层窗口，页面中所有iframe都是作为子窗口挂载在这个主Window之下的。要是该Window有对应的frameElement，那它就是此属性指向的那个iframe的窗口实例。

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