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

我来帮你梳理下问题的核心原因和对应解决办法：

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

用const声明的箭头函数默认是块级作用域，不会自动挂载到全局的window对象上；而传统function声明的函数，默认会成为window的属性，所以全局的onload事件能直接找到它。如果你的JS代码是通过<script type="module">加载的，模块内部的变量更是被隔离在模块作用域里，全局完全访问不到。

快速解决：显式暴露到全局（非模块场景） #

把你的箭头函数挂载到window上，这样onload就能正常找到并调用它：

window.bigBla = async () => {
  // 你的异步请求和DOM操作逻辑
};

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

大概率是因为你调用函数时，DOM还没完全加载完成——比如你的JS文件放在<head>标签里，执行代码的时候，<body>里的<span>和<iframe>还没被浏览器渲染出来，自然获取不到元素，也就无法修改它们的属性。而onload事件是等页面所有资源（包括DOM、图片等）加载完成后才触发，这时候DOM肯定是就绪的，所以用function声明的函数通过onload调用能正常工作。

更规范的解决方案：等待DOM就绪后执行逻辑 #

不管用哪种方式调用函数，都要先确保DOM加载完成。推荐使用DOMContentLoaded事件（它会在DOM渲染完成后立即触发，无需等待图片等资源加载），结合async函数的特性：

const bigBla = async () => {
  try {
    // 先发起异步请求
    const response = await fetch('你的接口地址');
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    const data = await response.json();

    // 操作DOM（此时DOM已就绪）
    const targetSpan = document.querySelector('span');
    const targetIframe = document.querySelector('iframe');
    if (targetSpan && targetIframe) {
      targetSpan.innerHTML = data.content;
      targetIframe.src = data.iframeSrc;
    }
  } catch (error) {
    console.error('执行出错：', error);
  }
};

// 监听DOM加载完成事件，调用函数
document.addEventListener('DOMContentLoaded', async () => {
  await bigBla();
});

如果你的JS是模块（<script type="module">），这个方法完全适用，不需要暴露函数到全局，更符合模块化开发规范。

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