如何在自定义Script块中终止依赖加载失败后的后续脚本运行？

完全可以实现你的需求，核心是通过验证依赖全局对象判断前置脚本是否正常加载，再通过页面重写或DOM监听阻止后续脚本执行，同时展示友好提示。

具体实现步骤 #

1. 编写依赖检测函数 #

以检测jQuery为例，验证全局对象是否存在且为有效函数：

function checkDependencies() {
  // 确保jQuery已挂载到window，且是可调用的函数
  return typeof window.jQuery !== 'undefined' 
    && typeof window.jQuery === 'function'
    // 可选：验证版本范围，避免版本不兼容
    && window.jQuery.fn.jquery.startsWith('3.');
}

2. 检测失败时的处理逻辑 #

如果依赖未加载成功，有两种可靠方式阻止后续脚本：

方式一：重写页面（彻底拦截）

这种方式会直接替换当前页面内容，后续脚本不会被浏览器解析执行，适合后续内容完全依赖前置脚本的场景：

/*
 * My block
 */
if (!checkDependencies()) {
  // 重写页面，展示友好提示
  document.open();
  document.write(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>加载失败</title>
      <style>
        .error-container {
          text-align: center;
          margin-top: 100px;
          font-family: Arial, sans-serif;
        }
        .error-title {
          font-size: 24px;
          color: #d9534f;
          margin-bottom: 16px;
        }
        .error-desc {
          font-size: 16px;
          color: #666;
        }
      </style>
    </head>
    <body>
      <div class="error-container">
        <div class="error-title">页面加载失败</div>
        <div class="error-desc">请稍后刷新页面，或联系技术支持协助处理</div>
      </div>
    </body>
    </html>
  `);
  document.close();
  // 终止当前脚本执行
  return;
}

方式二：用MutationObserver拦截后续脚本

如果需要保留部分已加载的页面内容，可以通过DOM监听移除后续新增的脚本标签：

/*
 * My block
 */
if (!checkDependencies()) {
  // 注入友好提示
  const errorTip = document.createElement('div');
  errorTip.style.cssText = `
    text-align: center;
    margin-top: 100px;
    font-size: 18px;
    color: #d9534f;
    font-family: Arial, sans-serif;
  `;
  errorTip.textContent = '页面加载失败，请稍后刷新或联系技术支持';
  document.body.appendChild(errorTip);

  // 监听head中新增的脚本标签，阻止其加载执行
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'SCRIPT') {
          // 移除脚本标签，阻止浏览器加载执行
          node.remove();
        }
      });
    });
  });

  // 启动监听，监控head的子元素变化
  observer.observe(document.head, { childList: true, subtree: true });

  // 终止当前脚本
  return;
}

关键说明 #

• 依赖检测需精准：不仅要检查全局对象是否存在，还要验证其类型或版本，避免因变量重名导致误判。
• 页面重写方式更彻底：同步加载的后续脚本还未被解析时，重写页面会直接中断浏览器的解析流程，完全阻止后续脚本执行。
• MutationObserver适合保留部分内容：但需注意，若后续脚本是内联同步脚本，可能需要结合其他拦截手段（如重写eval），不过大部分场景下移除标签已足够。

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