JavaScript 文件中的代码如何获取文件的 URL？

Posted 2023-02-23

【中文标题】JavaScript 文件中的代码如何获取文件的 URL？

【英文标题】：How can code in a JavaScript file get the file's URL?

【发布时间】：2010-11-19 17:38:22

【问题描述】：

我需要将 CSS 样式表动态加载到位于 不同 域的页面中。如何获取 JS 文件的完整 URL 以在样式表的 href 属性中使用？

例如，结构如下：

http://bla.com/js/script.js

http://bla.com/css/style.css

我想将样式表动态加载到页面http://boo.net/index.html。问题是，我事先并不知道 bla.com 位，只是样式表相对于 JS 文件位于 ../css/ 中。

该脚本当然包含在 index.html 中。 jQuery 也不错。

【参考方案1】：

在脚本标签中添加 ID：

<script type="text/javascript" id="myScript" src="http://bla.com/js/script.js"></script>

在http://bla.com/js/script.js:

var myScript = document.getElementById('myscript');
var myScriptSrc = myScript.getAttribute('src');
alert(myScriptSrc); // included for debugging

您应该能够操纵myScriptSrc 的值来获取bla.com 上任何其他内容的路径。

我认为这个示例是 James Black 在他的回答中的意思。

最后，对于所有建议使用document.location 的人，请记住，如果您想只读访问当前页面地址，您应该使用document.URL 或window.location。如果要设置页面地址，应始终使用window.location.href。尽管window.location = 'location'; 有效，但看到一个字符串被分配给一个位置总是让我感到困扰。我不知道为什么，因为 JavaScript 允许各种其他隐式类型转换。

mozilla reference: document.location 最初是一个只读属性，尽管 Gecko 浏览器也允许您分配给它。为了跨浏览器的安全，请改用window.location。要仅将 URL 作为字符串检索，可以使用只读的 document.URL 属性。 Sun reference：不要使用location作为document对象的属性；请改用 document.URL 属性。 document.location 属性是 document.URL 的同义词，已弃用。

【讨论】：

不错。次要：officially, html4 does not allow an id in <script>。 HTML5 可以。

【参考方案2】：

比使用id 更容易的是，只保留标记并使用document.currentScript。 MDN 的链接在 Notes 部分下提到，这是一个需要 JavaScript 同步执行的小怪癖，我将解释如何避免这个陷阱。

请务必注意，如果脚本中的代码作为回调或事件处理程序被调用，这将不会引用 <script> 元素；它只会在最初处理时引用元素。

此解决方案的优点是您不需要使用特殊标记，如果您由于某种原因无法自己访问 HTML（例如，如果它被客户端或开发人员使用您的 API )。

如果脚本是同步执行的（这意味着脚本的主要内容没有包含在事件侦听器或其他一些函数设置为晚于代码“最初正在处理”时进行评估 )，您可以简单地使用 document.currentScript 访问代码中当前正在处理的 <script> 元素。为了演示如何有效地使用它，我将在下面提供一个基本演示。

HTML：

<script type="text/javascript" src="http://bla.com/js/script.js"></script>

http://bla.com/js/script.js 中的 JavaScript：

var myScript = document.currentScript,
    mySrc = myScript.getAttribute('src');

console.log(mySrc); // "http://bla.com/js/script.js"

$(function () 
    // your other code here, assuming you use jQuery
    // ...
);

如果你不希望变量暴露在全局范围内，你也可以这样做：

(function () 
    var myScript = document.currentScript,
        mySrc = myScript.getAttribute('src');

    console.log(mySrc); // "http://bla.com/js/script.js"

    $(function () 
        // your other code here
        // ...
    );
()); // self-executing anonymous function

基本上，关键是在脚本同步执行期间确保并访问document.currentScript，否则它不会引用您期望的内容。

【讨论】：

IE 11 不支持。

【参考方案3】：

使用 Jquery，您可以执行以下操作：

$('script[src$="my_script.js"]').attr('src').replace('my_script.js','');
// outputs something like: "/static/js/"

【讨论】：

当脚本标签上没有 id 并且它是合作伙伴的代码，您不能添加 DOM id 时非常有用。

【参考方案4】：

var JS_SELF_URL = (function() 
    var script_tags = document.getElementsByTagName('script');
    return script_tags[script_tags.length-1].src;
)();

当浏览器解析标签时，它也会下载并执行它们。因此，当你的 JS 文件被执行时，它是当前解析的最后一个标签。

【讨论】：

在使用async关键字时避免这种情况。

【参考方案5】：

您可以在脚本标签中查找 javascript 位置，通过使用 document.location，您可能可以确定相对地址，以确定 css 文件的位置。

【参考方案6】：

错误对象的Stack属性可以提供URL信息。

try 
 
  throw new Error();

catch(exc)

  console.log(exc.stack);

不幸的是，Webkit 不（但 Chromium 支持）堆栈属性。有几个浏览器支持这个功能：http://173.45.237.168/reference/html/api/Error.html#Error.stack

Webkit 提供了 sourceURL 属性，而不是堆栈，这里是示例用法：

try 
 
  throw new Error();

catch(exc)

  console.log(exc.sourceURL);

【参考方案7】：

您可以阅读document.location，但也可以只使用相对网址

【讨论】：

据我所知，document.location返回的是当前文档的URI，而不是里面执行代码的JS文件。