JavaScript文件中的代碼如何獲取文件的URL？

我需要一個CSS樣式表動態地加載到一個網頁，是一個不同域。如何獲得JS文件的完整URL以用於樣式表的屬性？JavaScript文件中的代碼如何獲取文件的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也很好。

來源

2009-08-14 montrealist

的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本來是一個只讀屬性，雖然壁虎瀏覽器允許您分配給它。爲了實現跨瀏覽器安全性，請改用window.location。要僅將URL作爲字符串檢索，可以使用只讀document.URL屬性。
Sun reference：不要使用location作爲document對象的屬性;改用document.URL屬性。 document.location屬性（document.URL的同義詞）已棄用。錯誤對象的

來源

2009-08-14 19:02:24

不錯。微不足道：[正式，HTML4不允許'

您可以閱讀document.location，但你也可以只使用相對URL

來源

2009-08-14 17:48:42 bjelli

據我所知，document.location返回當前文檔的URI，而不是執行代碼的JS文件。 – montrealist 2009-08-14 17:51:59

你可以看看在腳本標籤的JavaScript的位置，並通過使用document.location你很可能確定相對尋址，以確定CSS文件可能在哪裏。

來源

2009-08-14 18:01:00

堆棧屬性可提供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財產，這裏是exampe用法：

try 
{ 
    throw new Error(); 
} 
catch(exc) 
{ 
    console.log(exc.sourceURL); 
}

來源

2010-06-15 19:39:10 sid3k

使用jQuery，你可以這樣做：

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

來源

2011-10-11 01:05:53 Toby

當腳本標籤上沒有標識時它非常有用，它是您不能添加DOM標識的夥伴代碼。 – 2014-03-09 15:49:47

優秀的單線！ – Michael 2014-10-17 14:24:33

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

由於瀏覽器解析標籤，它也會下載並執行它們。因此，當你的JS文件被執行時，它是當前分析的最後一個標記。

來源

2013-01-21 20:11:36 bradt

使用'async'關鍵字時避免這種情況。 – tomasbedrich 2014-03-13 09:37:46

這太可怕了，我喜歡它。Upvote x 100+ – 2016-06-13 21:40:38

甚至比使用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腳本的執行，否則它不會引用你期望的內容。

來源

2014-12-28 00:48:45

此答案值得更多選票！ – 2015-11-26 00:28:49

JavaScript文件中的代碼如何獲取文件的URL？

回答

相關問題