iframe 中异步加载的 script 会阻塞 frame 的 load 事件吗？

发布于
2018-02-01

使用 iframe 打开一个子页面，子页面中有一段异步加载 script 文件的代码，如：

var node = doc.createElement('script');
node.src = 'xxx.js';
node.async = true;
head = doc.getElementsByTagName('head')[0];
head.appendChild(node);
node.addEventListener('load', function(e){
    console.log('script complete!!');
}, false);

父页面给 iframe 绑定了 load 事件：

$('iframe').on('load', function(){
    console.log('frame complete!!');
});

请问 iframe 的 load 事件会等待这个异步的 js 加载完毕再触发吗？

javascript html

阅读 7k

3 个回答

xianshenglu

tanglijun

做了个测试

index.html

(function () {
  var iframe = document.createElement('iframe')

  iframe.src = './test.html'
  iframe.style.display = 'none'

  document.body.appendChild(iframe)

  iframe.onload = function () {
    console.log('iframe loaded!')
  }
}());

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" async="true" onload="console.log('async script loaded!')"></script>
  </head>
  <body>

  </body>
</html>