Chrome 100+版本WordPress页无法获取iframe内部DOM元素问题咨询

该问题是浏览器规则变更与站点环境特性叠加导致，与跨域访问权限限制无关：

• Chrome 100 版本调整了父页面window.onload事件的触发规则：99及更早版本Chrome、现有Firefox版本中，父页面window.onload会默认阻塞等待所有同域iframe完成DOM解析、内部资源加载后才触发回调；Chrome 100起移除了该阻塞逻辑，父页面onload触发时，同域iframe很可能还处于导航到目标src地址的中间状态，此时通过contentDocument或contentWindow.document获取到的是iframe初始化时生成的临时空文档，就是你控制台打印的空<html><head></head><body></body></html>骨架，并非目标页面的实际DOM结构。
• WordPress 5.7.6 的固定页面加载逻辑会放大此时序差：该版本WordPress在输出固定页面时，会默认加载多个内置前端资源（emoji解析脚本、古腾堡编辑器兼容逻辑、REST API预加载脚本等），这些资源的加载会提前触发父页面的onload事件，进一步拉开父页面onload和iframe自身加载完成的时间差；非WordPress搭建的普通静态HTML页面没有这类额外内置脚本抢占加载时序，多数场景下同域iframe会在父页面onload触发前完成加载，因此不会复现问题。

验证方案 #

将获取iframe内部DOM的逻辑绑定到iframe元素自身的load事件上，即可正常获取完整DOM结构，代码示例：

<iframe src="/form/terms/sample.html" width="100%" height="500px" frameborder="0" id="iframe"></iframe>
<script>
var iframe = document.getElementById("iframe");
iframe.onload = function(){
    var iframe_doc = iframe.contentDocument || iframe.contentWindow.document;
    console.log(iframe_doc);
}
</script>

所有涉及iframe内部DOM访问的逻辑，都不要依赖父页面的window.onload判断加载状态，必须绑定到iframe元素自身的load事件执行，才能兼容全版本Chrome、Firefox浏览器。

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