如何检测脚本是否已完全加载并执行？

开发者阿泽

2026-8-5

检测脚本any-script.js是否完全加载并执行的方案

针对脚本加载状态检测的问题，没有单一浏览器API能直接覆盖所有场景，但可以通过以下几种方法组合解决：

1. 利用脚本元素`readyState`属性结合`load`事件

脚本加载完成后，其readyState属性会变为"loaded"或"complete"。可以先判断这个状态，再决定是否添加事件监听器：

function handleScriptLoaded() {
  // 这里编写脚本加载完成后的逻辑
  console.log('any-script.js已加载并执行');
}

// 查找DOM中已存在的目标脚本
const existingScript = document.querySelector('script[src="any-script.js"]');

if (existingScript) {
  // 检查脚本是否已加载完成
  if (existingScript.readyState === 'loaded' || existingScript.readyState === 'complete') {
    handleScriptLoaded();
  } else {
    // 脚本仍在加载中，添加load事件监听
    existingScript.addEventListener('load', handleScriptLoaded);
  }
} else {
  // DOM中无该脚本，动态加载并监听load事件
  const newScript = document.createElement('script');
  newScript.src = 'any-script.js';
  newScript.addEventListener('load', handleScriptLoaded);
  document.body.appendChild(newScript);
}

2. 约定全局标识（适用于可修改目标脚本的场景）

如果能控制any-script.js的内容，可在脚本末尾添加全局变量作为加载完成标记，再通过轮询检测该变量：

// 在any-script.js的末尾添加：
window.anyScriptIsReady = true;

// 检测逻辑：
function checkScriptReady() {
  if (window.anyScriptIsReady) {
    handleScriptLoaded();
  } else {
    // 每隔100ms轮询一次，直到检测到标记
    setTimeout(checkScriptReady, 100);
  }
}

checkScriptReady();

若无法修改目标脚本，此方法不适用，但在抽象回调场景中，这种约定式方案可靠性较高。