ES6中const声明的箭头函数如何在页面加载时调用？

我来帮你拆解下遇到的问题，其实核心是作用域和DOM加载时机这两个点在搞鬼：

一、为什么onload="bigBla()"无效？ #

如果你的JS文件是通过<script type="module" src="xxx.js"></script>引入的，那用const声明的bigBla属于模块作用域，不会挂载到全局的window对象上。而onload属性里的代码是在全局作用域执行的，自然找不到这个函数。

反观用function声明的函数：在非模块脚本里，它会自动成为window的属性（全局变量），所以onload能直接调用到。

解决办法： #

1. 在JS内部监听加载事件（推荐）：
   不用依赖全局作用域，直接在你的JS文件里添加事件监听，这样能直接访问到模块内的bigBla：

   const bigBla = async () => {
     // 你的HTTP请求和DOM修改逻辑
     const res = await fetch('你的接口地址');
     const data = await res.json();
     document.getElementById('target-span').innerHTML = data.content;
     document.getElementById('target-iframe').src = data.iframeUrl;
   };
   
   // 监听页面加载完成事件
   window.addEventListener('load', bigBla);
   

2. 把函数挂载到window上（适合非要用onload属性的场景）：
   如果坚持想用HTML里的onload属性，手动把函数暴露到全局：

   const bigBla = async () => {
     // ...你的逻辑
   };
   
   // 挂载到window，让全局作用域能访问到
   window.bigBla = bigBla;
   

   这时候HTML里的onload="bigBla()"就能正常工作了。

二、为什么JS末尾直接调用bigBla()无法修改DOM？ #

这是因为你调用函数时，目标DOM元素还没被浏览器解析出来。浏览器是从上到下解析HTML的，如果你的JS脚本放在<head>里，执行时<body>里的span、iframe还没生成，自然获取不到元素，修改也就无效。

而onload事件是等页面所有资源（DOM、图片、样式表等）加载完成后才触发的，这时候DOM已经完全就绪，所以用function+onload的方式能正常修改元素。

解决办法： #

1. 监听DOMContentLoaded事件（更高效）：
   这个事件在DOM解析完成后就触发，不用等图片、样式等资源加载，比load事件更早执行：

   const bigBla = async () => {
     // ...你的逻辑
   };
   
   document.addEventListener('DOMContentLoaded', async () => {
     await bigBla(); // 因为是async函数，用await确保异步操作完成后再处理后续
   });
   

2. 把JS脚本放到页面末尾：
   将你的<script>标签放在</body>标签之前，这样当JS执行时，前面的DOM元素已经全部解析完毕，直接调用bigBla()就能找到目标元素：

   <body>
     <span id="target-span"></span>
     <iframe id="target-iframe"></iframe>
   
     <script src="你的脚本.js"></script>
   </body>
   

   脚本里直接调用：

   const bigBla = async () => {
     // ...你的逻辑
   };
   
   // 直接调用，此时DOM已就绪
   bigBla();
   

额外注意点 #

因为你的函数是async的，里面包含HTTP请求这类异步操作，记得要确保数据返回后再修改DOM（用await处理请求），不然可能会出现拿到空数据的情况。

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