如何通过JavaScript阻止或移除外部JS文件的调用操作

好的，咱们来一步步解决这个问题。你遇到的是动态加载外部脚本的拦截难题——这种情况确实没法直接通过查找已存在的script标签搞定，毕竟脚本是JS动态生成的，要么还没插入DOM，要么刚插入就执行了。下面是几个实用的方案：

方案1：重写动态加载脚本的函数 #

从你给出的调用格式(window,document,'script','www.mydomain.com/myscript.js')来看，这大概率是某个封装好的动态加载函数（比如常见的loadScript类工具函数）的调用。这种情况下，我们可以直接重写这个函数，在它执行前拦截目标URL或者直接阻止加载：

// 先保存原函数的引用（确保原函数已定义）
const originalLoadScript = window.loadScript;
// 重写目标函数
window.loadScript = function(window, document, type, url) {
  // 检测是否是我们要拦截的域名
  if (url.includes('www.mydomain.com')) {
    console.log('已拦截目标脚本加载:', url);
    
    // 如果你想替换URL，修改后调用原函数即可
    // url = 'https://your-replacement-script-url.com';
    // return originalLoadScript(window, document, type, url);
    
    // 直接阻止加载的话，就不执行原函数
    return;
  }
  // 其他正常脚本继续按原逻辑加载
  return originalLoadScript(window, document, type, url);
};

⚠️ 注意：这段代码必须在目标加载函数被定义之后、调用之前执行，否则不会生效。

方案2：用MutationObserver监听DOM变化，拦截新增的script标签 #

如果不知道加载函数的名字，或者函数是匿名的，我们可以用MutationObserver监听DOM中新增的节点，在脚本执行前拦截它：

// 创建观察者实例
const scriptObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有新增的DOM节点
    mutation.addedNodes.forEach((node) => {
      // 检查是否是目标script标签
      if (node.tagName === 'SCRIPT' && node.src.includes('www.mydomain.com')) {
        console.log('发现目标脚本，已阻止加载:', node.src);
        // 移除节点，阻止脚本执行
        node.remove();
        
        // 若需要替换脚本，可创建新标签插入
        // const newScript = document.createElement('script');
        // newScript.src = 'https://your-new-script.com';
        // document.head.appendChild(newScript);
      }
    });
  });
});

// 配置观察者：监听head和body的子节点变化
scriptObserver.observe(document.head, { childList: true });
scriptObserver.observe(document.body, { childList: true });

这个方法的优势是不管脚本是怎么被创建的，只要插入DOM就能被拦截，但要注意代码执行时机——最好把这段代码放在页面head的最顶部，才能赶在目标脚本执行前完成监听。

方案3：重写document.createElement方法（底层拦截） #

如果上面两种方法都覆盖不到，我们可以从更底层入手，重写document.createElement，监控所有通过这个方法创建的script标签：

const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
  const element = originalCreateElement.call(this, tagName);
  
  if (tagName.toLowerCase() === 'script') {
    // 拦截setAttribute设置src的情况
    const originalSetAttr = element.setAttribute;
    element.setAttribute = function(name, value) {
      if (name === 'src' && value.includes('www.mydomain.com')) {
        console.log('已拦截脚本src设置:', value);
        // 可修改value后再调用原方法，或直接返回不设置
        // value = 'https://new-script-url.com';
        // return originalSetAttr.call(this, name, value);
        return;
      }
      return originalSetAttr.call(this, name, value);
    };
    
    // 拦截直接赋值element.src的情况
    Object.defineProperty(element, 'src', {
      set: function(value) {
        if (value.includes('www.mydomain.com')) {
          console.log('已拦截脚本src赋值:', value);
          return;
        }
        this.setAttribute('src', value);
      },
      get: function() {
        return this.getAttribute('src');
      }
    });
  }
  
  return element;
};

这个方法能覆盖绝大多数动态创建script的场景，同样需要把代码放在页面尽可能靠前的位置。

为什么你之前的方法没效果？ #

你提到“无法访问script标签内的元素”，核心原因是这个脚本是通过JS动态创建插入的——要么在你尝试查找时，脚本还没被插入DOM；要么刚插入就执行完成，甚至被后续代码移除了，所以常规的document.querySelector('script[src*="mydomain"]')根本找不到目标元素，这时候就需要用上面的动态拦截方案。

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