如何在JavaScript中获取已加载脚本的URL？跨域脚本如何识别自身来源？

嘿，这两个问题在日常开发中挺实用的，我来给你详细拆解下：

一、获取已加载脚本的URL #

分两种常见场景：获取当前执行脚本的URL，以及获取页面中所有已加载脚本的URL。

1. 获取当前执行脚本的URL #

最直接的方式是用document.currentScript，它会返回当前正在执行的<script>元素，直接取它的src属性就能拿到脚本的加载URL：

// 在目标脚本内部执行这段代码
const myOwnUrl = document.currentScript.src;
console.log('我是从这个地址加载的：', myOwnUrl);

不过要注意，IE浏览器不支持document.currentScript，如果需要兼容老浏览器，可以通过错误栈来提取：

function getMyScriptUrl() {
  try {
    throw new Error();
  } catch (e) {
    // 从错误栈中解析出当前脚本的URL，不同浏览器栈格式略有差异
    const stackLines = e.stack.split('\n');
    // 通常第二行是当前脚本的调用信息
    const urlMatch = stackLines[1].match(/(https?:\/\/[^ \n]+)/);
    return urlMatch ? urlMatch[1] : null;
  }
}

// 调用后就能拿到当前脚本的URL
console.log(getMyScriptUrl());

2. 获取页面中所有已加载脚本的URL #

你可以遍历document.scripts集合，这个集合包含了页面中所有的<script>元素，每个元素的src属性就是对应的脚本URL：

// 把所有脚本URL转成数组
const allScriptUrls = Array.from(document.scripts).map(script => script.src);
console.log('页面中所有已加载的脚本URL：', allScriptUrls);

二、跨域脚本能否知晓自身来源？ #

当然可以！比如你的mysite.com页面加载了anothersite.com的脚本，这个脚本在执行时，完全可以通过上面提到的document.currentScript.src获取到自己的加载地址（也就是anothersite.com的那个URL）。

这里不存在跨域限制，因为脚本是在自身执行上下文里访问自己对应的<script>元素的src属性，不属于跨域资源访问的范畴。哪怕脚本和页面域名不同，脚本内部依然能准确拿到自己的加载来源。

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