如何让第三方外部脚本在window.onload触发时执行

算力阿峰

2026-4-29

解决页面加载完成后触发第三方脚本执行的问题

嘿，我完全懂你的困惑！你想把第三方脚本延迟到页面完全加载完成后再执行，但发现没法直接把脚本地址传给window.onload或者addEventListener——因为这些方法需要的是函数，不是字符串URL。别担心，我们可以通过动态创建script元素的方式实现你的需求，下面给你两种常用的写法：

方法一：使用`window.onload`绑定函数

你之前看到的window.onload = codeAddress写法是对的，我们只需要把加载第三方脚本的逻辑放到这个函数里就行：

function loadThirdPartyScript() {
  // 创建一个script元素
  const scriptTag = document.createElement('script');
  // 给脚本设置你需要的属性（和原示例一致）
  scriptTag.id = 'snippet';
  scriptTag.src = 'https://something.com/dsd/something.js?key=35345';
  // 将脚本添加到页面的body末尾，浏览器会自动加载并执行它
  document.body.appendChild(scriptTag);
}

// 页面加载完成后执行这个函数
window.onload = loadThirdPartyScript;

方法二：使用`addEventListener`（匿名函数版本）

如果你不想单独定义函数名，直接用匿名函数传入addEventListener就可以了，这样更简洁：

window.addEventListener('load', function() {
  const scriptTag = document.createElement('script');
  scriptTag.id = 'snippet';
  scriptTag.src = 'https://something.com/dsd/something.js?key=35345';
  document.body.appendChild(scriptTag);
});

或者用ES6箭头函数更清爽：

window.addEventListener('load', () => {
  const scriptTag = document.createElement('script');
  scriptTag.id = 'snippet';
  scriptTag.src = 'https://something.com/dsd/something.js?key=35345';
  document.body.appendChild(scriptTag);
});