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

Question

我需要将 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 也很好。

Answer 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。

我认为这个样本就是詹姆斯布莱克在他的回答中的意思。

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

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

Answer 2

比使用 an 更容易的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>

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

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在脚本同步执行期间进行访问，否则它不会引用您期望的内容。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

Answer 6

错误对象的堆栈属性可以提供 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);
}

Answer 7

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