添加外部script脚本后，如何读取其源URL的请求响应？

嘿，这个问题我刚好研究过！直接用你贴的那种<script>标签插入方式，其实是拿不到响应内容的——因为浏览器加载外部脚本的逻辑是，拿到响应后直接解析执行，不会把响应文本暴露给页面脚本。不过有两种可行的方法能实现你的需求，我给你详细说说：

方法一：主动请求脚本内容再执行（最可控） #

这种思路是先通过fetch或XMLHttpRequest主动获取脚本的响应文本，保存下来之后，再手动创建<script>标签执行脚本。这样既能拿到响应内容，又不影响脚本的正常执行。

用fetch的示例代码如下：

// 先发起请求获取脚本内容
fetch('http://example.com')
  .then(response => {
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 这里可以直接拿到响应文本
    return response.text();
  })
  .then(scriptContent => {
    // 把响应内容存起来，或者做你需要的处理
    console.log('脚本的响应内容：', scriptContent);
    
    // 手动创建script标签执行脚本
    const s = document.createElement('script');
    s.textContent = scriptContent;
    document.body.appendChild(s);
  })
  .catch(err => console.error('请求过程出错：', err));

⚠️ 注意：这种方法需要目标域名支持CORS跨域资源共享，如果对方服务器没设置允许你域名的CORS头，浏览器会拦截这个请求，这时候可能需要借助后端代理来解决跨域问题。

方法二：用Service Worker拦截请求（适合监控现有脚本） #

如果你是想捕获页面中已经存在的<script>标签的请求响应（比如别人写的代码插入了脚本，你想拿到它的响应），可以用Service Worker来拦截网络请求，从而获取响应内容。

步骤1：主页面注册Service Worker #

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => console.log('Service Worker注册成功！'))
    .catch(err => console.error('Service Worker注册失败：', err));
}

步骤2：编写Service Worker文件（sw.js） #

self.addEventListener('fetch', event => {
  // 拦截目标脚本的请求
  if (event.request.url === 'http://example.com') {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // 克隆响应（因为响应流只能被读取一次）
          const clonedResponse = response.clone();
          // 读取响应文本
          clonedResponse.text().then(content => {
            console.log('拦截到的脚本响应内容：', content);
            // 把内容发送给主页面
            self.clients.matchAll().then(clients => {
              clients.forEach(client => {
                client.postMessage({
                  type: 'SCRIPT_RESPONSE',
                  content: content
                });
              });
            });
          });
          // 返回原响应，让页面正常加载脚本
          return response;
        })
    );
  }
});

步骤3：主页面监听Service Worker的消息 #

navigator.serviceWorker.addEventListener('message', event => {
  if (event.data.type === 'SCRIPT_RESPONSE') {
    console.log('从Service Worker收到的响应内容：', event.data.content);
  }
});

⚠️ 注意：Service Worker需要在HTTPS环境下运行（localhost本地开发除外），而且同样受CORS限制，只能拦截允许跨域的请求。

额外小技巧：开发阶段快速查看 #

如果只是在开发时想看看响应内容，不用写代码，直接打开浏览器开发者工具的Network面板，找到对应的脚本请求，切换到Response标签就能看到响应文本了，这是最快捷的方式。

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