如何在页面加载时运行脚本？如何使用JavaScript实现页面加载时执行script标签代码

嘿，我懂你搜了好几个网站都没找到能用方案的苦恼！别慌，下面这几个经过实践验证的方法，都能帮你实现页面加载时执行脚本的需求，你可以根据自己的场景选：

1. 用 DOMContentLoaded 事件（推荐优先用这个） #

这个事件会在DOM树完全构建完成时触发，不用等图片、样式表这些外部资源加载完，速度更快，大多数场景下都适用。比如你要操作页面上的DOM元素，用这个就刚好：

document.addEventListener('DOMContentLoaded', function() {
  // 这里写你要执行的代码
  const welcomeMsg = document.createElement('p');
  welcomeMsg.textContent = '页面DOM已经准备好啦！';
  document.body.appendChild(welcomeMsg);
});

2. 用 window.onload 事件 #

如果你需要等所有资源（图片、样式、脚本等）都加载完成再执行代码，就用这个。比如你要获取图片的实际尺寸，就得等图片加载完才行：

window.onload = function() {
  // 所有资源加载完成后执行
  const heroImage = document.getElementById('hero-img');
  console.log('图片宽度：', heroImage.width);
};

⚠️ 注意：如果页面上有多个window.onload，后面的会覆盖前面的，所以更推荐用addEventListener的写法（把DOMContentLoaded换成load就行）：

window.addEventListener('load', function() {
  // 你的代码
});

3. 把脚本放在 <body> 标签末尾 #

这是最简单的方法！因为HTML是从上到下解析的，当解析到body末尾的脚本时，页面上的DOM元素已经都被解析出来了，直接写代码就能运行：

<body>
  <!-- 所有页面内容都在这里 -->
  <h1 id="page-title">Hello World</h1>

  <!-- 脚本放在body最后 -->
  <script>
    // 直接操作DOM，没问题
    document.getElementById('page-title').style.color = 'blue';
  </script>
</body>

小提醒 #

• 如果你用了async或defer属性的外部脚本，它们的执行时机可能和页面加载不同，要是你需要脚本在页面加载时执行，尽量不要用这两个属性。
• 避免把脚本放在<head>里直接执行（不加事件监听），这时候DOM还没解析，会找不到元素哦！

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