defer 对iframe加载无效吗？

Question

A.HTML

<div id="d2" class="div2">
    <p>Street Fighter II: The World Warrior</p>
    <p>The King of Fighters '96</p>
    <p>Metal Slug 2</p>
</div>
<iframe src="B.html" frameborder="1" width="50%" height="500" id="f1">
</iframe>

<script defer src="A.js"></script>

A.js

let x = document.getElementById("f1");
let ifra_window = x.contentWindow;
let s = ifra_window.document.getElementById("d1");
console.log(s.children[0].innerHTML);

B.HTML

<div id="d1" class="div1">
    <p>c#</p>
    <p>python</p>
    <p>javascript</p>
</div>

实验报错：Uncaught TypeError: Cannot read property 'children' of null
我知道这是B.HTML未加载完成， A.js就急着调用导致的错误。
因为我将A.js修改成 我初写的模式就OK了。

old_A.js

let x = document.getElementById("f1");
x.onload = function () {
    let ifra_window = x.contentWindow;
    let s = ifra_window.document.getElementById("d1");
    console.log(s.children[0].innerHTML);
}

我的问题是：defer应该达到“HTML读取完毕，再加载js脚本”的作用，但显然本例并非如此，难道defer只对本页面HTML有效，对iframe的加载无效？？ 如果是这样，只能用old_A.js这个模式了。。。

Answer 1

defer 是在 DOMContentLoaded 之前执行，而这个事件仅仅表示 DOM 加载完成了，而资源并没有加载完成，资源加载完成后会触发 onload，所以你还是需要 onload 后处理