如何通过Window API延迟加载批量打开链接以规避429错误？

要实现「标签页获焦后再加载目标链接」的需求，核心思路是先打开空白页而非直接加载目标URL，再通过监听窗口焦点事件触发实际加载——Chrome默认会预加载新打开标签页的内容，直接传目标链接的话，不管标签页有没有焦点都会提前发起请求，所以必须绕开这个机制。

实现代码 #

linksArray.forEach((link) => {
  // 先打开空白页面，避免预加载目标链接
  const newWindow = window.open('about:blank', '_blank', 'noopener');
  
  if (!newWindow) {
    console.warn('浏览器阻止了新窗口打开，请检查弹窗权限设置');
    return;
  }

  // 定义加载目标链接的逻辑
  const loadTargetPage = () => {
    newWindow.location.href = link;
    // 加载完成后移除事件监听，避免重复触发
    newWindow.removeEventListener('focus', loadTargetPage);
    newWindow.removeEventListener('beforeunload', cleanupListeners);
  };

  // 清理事件监听，防止内存泄漏
  const cleanupListeners = () => {
    newWindow.removeEventListener('focus', loadTargetPage);
  };

  // 监听窗口焦点事件，获焦时加载目标链接
  newWindow.addEventListener('focus', loadTargetPage);
  // 窗口关闭时清理监听
  newWindow.addEventListener('beforeunload', cleanupListeners);
});

关键说明 #

• 避免预加载：用about:blank作为初始URL，Chrome不会预加载任何外部资源，只有当用户切换到该标签页触发focus事件时，才会跳转并加载目标链接，从根源上避免批量请求触发429错误。
• 权限处理：批量打开数百个标签页大概率会触发浏览器的弹窗拦截，需要用户提前允许当前页面的弹窗权限。
• 内存优化：添加beforeunload事件监听，在窗口关闭时移除focus监听，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者fra.mstr