如何为HTML中的静态资源请求（<script>/<link>）设置超时时间？

你遇到的这个问题确实很棘手——当请求被防火墙完全丢弃、没有任何响应返回时，浏览器的原生资源加载机制会一直处于等待状态，既不会触发onerror事件，也不会自动终止，导致页面看起来一直在加载。遗憾的是，原生的<script>和<link>标签本身并没有提供设置超时的属性，但我们可以通过动态创建资源元素+定时器的方式来实现自定义超时控制，下面是具体的解决方案：

一、动态加载脚本并设置超时 #

通过JavaScript手动创建<script>元素，同时绑定定时器，当超过指定时间资源仍未加载完成时，主动移除该元素并触发错误处理逻辑。这种方式能完全掌控加载流程，避免无限等待。

示例代码：

function loadScriptWithTimeout(url, timeout = 30000) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    
    // 资源加载成功的回调
    script.onload = () => {
      clearTimeout(timeoutId);
      resolve('Script loaded successfully');
    };
    
    // 资源加载失败的回调（适用于返回错误状态码的情况）
    script.onerror = () => {
      clearTimeout(timeoutId);
      reject(new Error('Failed to load script'));
    };
    
    // 超时处理逻辑
    const timeoutId = setTimeout(() => {
      // 移除未完成加载的脚本元素，终止请求
      script.remove();
      reject(new Error(`Script load timed out after ${timeout}ms`));
    }, timeout);
    
    // 将脚本插入到页面中开始加载
    document.head.appendChild(script);
  });
}

// 使用方法
loadScriptWithTimeout('https://unreachable.xxx/page.js', 30000)
  .then(result => console.log(result))
  .catch(error => {
    console.error(error.message);
    // 在这里执行你的错误处理逻辑：比如上报错误、显示提示、加载备用资源等
    reportErrors(error); // 调用你的错误上报脚本
  });

二、样式表（Link标签）的超时控制 #

对于<link rel="stylesheet">资源，我们可以用同样的思路实现超时控制：

function loadStyleWithTimeout(url, timeout = 30000) {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    
    link.onload = () => {
      clearTimeout(timeoutId);
      resolve('Style loaded successfully');
    };
    
    link.onerror = () => {
      clearTimeout(timeoutId);
      reject(new Error('Failed to load style'));
    };
    
    const timeoutId = setTimeout(() => {
      link.remove();
      reject(new Error(`Style load timed out after ${timeout}ms`));
    }, timeout);
    
    document.head.appendChild(link);
  });
}

关键说明 #

• 对于防火墙完全丢弃请求的场景，onerror事件通常不会被触发，因此定时器是实现超时控制的核心，它能确保无论请求是否有响应，我们都能在指定时间内终止等待并处理异常。
• 这种动态加载的方式需要你调整页面的资源加载逻辑：把原本静态写在HTML里的<script>/<link>标签替换为上述函数调用，这样才能实现自定义超时。

这样就能解决你遇到的页面无限加载问题，同时还能在超时后主动上报错误，符合你的需求。

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