Javascript 异步脚本何时触发 onload

发布于05月03日

以下片段摘自an example in Google API doc.这段代码中有趣的部分是，<head>中的两个<script async>中的onload事件处理程序在后面的<body>中定义.异步脚本中的onload事件是否只有在解析<body>之后才会触发？是否有任何规范提供此类保证？或者这段代码只有在隐含的假设下才是正确的，即<head>中的这两个特定脚本需要很长时间来获取和执行？

<!DOCTYPE html>
<html>
<head>
  <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoad()"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisInit()"></script>
</head>
<body>
  <script>

    function gapiLoad() {
       // do something 
    }

    function gisInit() {
       // do something 
    }

    // there are other stuffs...

  </script>
</body>
</html>

推荐答案

Onload EventHandler支持以下HTML标记:<body>, <frame> (deprecated), <iframe>, <img>, <input type="image">, <link>, <script>, <style>, <track>, <svg>, <use>, <foreignObject>, <image>, <object>, <embed.(感谢@kaido完成此列表.)

如果希望确保JS仅在加载DOM时运行，可以从body标记加载处理程序函数.

Note您需要知道，当将onload与async一起使用时，当脚本异步加载时，它们会延迟onload事件.异步加载的脚本通常会加载其他脚本.

function start() {
  gapiLoad();
  gisInit();
}

function gapiLoad() {
  console.log(1)
  // do something 
}

function gisInit() {
  console.log(2)
  // do something 
}
    
    // there are other stuffs...

<head>
<script async defer src="https://apis.google.com/js/api.js" ></script>
<script async defer src="https://accounts.google.com/gsi/client"></script>
</head>

<body onload="start()">

Javascript 异步脚本何时触发 onload

推荐答案

Javascript相关问答推荐

如何找出摆线表面上y与x相交的地方？

如何使覆盖div与可水平滚动的父div相关？

将现场录音发送到后端

JS，当你点击卡片下方的绿色空间，而它是在它的背后转动时，

将基元传递给THEN处理程序

当我点击一个按钮后按回车键时，如何阻止它再次被点击

将Auth0用户对象存储在nextjs类型脚本的Reaction上下文中

使用Reaction窗体挂钩注册日历组件

自动滚动功能在当前图像左侧显示上一张图像的一部分

如何在加载页面时使锚定标记成为焦点

如何使用fltter_js将对象作为参数传递给javascrip？

相对于具有选定类的不同SVG组放置自定义工具提示

递归地将JSON对象的内容上移一级

在JS/TS中构造RSA公钥

带元素数组的Mongo聚合

如何将缓冲区数组转换回音频

我如何让我的弹力球在JavaScript和HTML画布中相互碰撞后改变 colored颜色？

在使用Jest进行测试时，在Express应用程序中未定义Multer

如何在chartjs-plugin-data Labels v2.1.0插件中设置照片？

当我单击一个按钮时，所有按钮都会自动单击