Question

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

例如，这是结构：

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上任何其他内容的路径。

我认为这个样本是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的同义词，已弃用。

Answer 2

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

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

Answer 3

比使用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，否则它将不会引用您期望的内容。

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，但也可以使用相对网址

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);
}

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

7 个答案: