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

Question

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

例如，这是结构：

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

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

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

当然，该脚本包含在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 。

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

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

• mozilla引用 ： document.location最初是一个只读属性，虽然Gecko浏览器也允许你分配它。 对于跨浏览器安全性，请改用window.location 。 要仅将URL检索为字符串，可以使用只读document.URL属性。
• Sun参考 ：不要将location用作document对象的属性; 请改用document.URL属性。 不推荐使用document.location属性，它是document.URL的同义词。

Answer 2

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

重要的是要注意，如果<script>的代码被调用为回调或事件处理程序，则不会引用<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 ，否则它将不会引用您期望的内容。

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

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

Answer 6

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

Answer 7

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