2010-02-12 118 views
44

我正在嘗試執行類似於C #include "filename.c"或PHP include(dirname(__FILE__)."filename.php")但JavaScript的操作。我知道我可以做到這一點,如果我可以得到加載js文件的URL(例如,在標籤的src屬性中給出的URL)。有沒有什麼辦法讓JavaScript知道?如何獲取當前正在執行的javascript代碼的文件路徑

或者,有沒有什麼好的方法來從同一個域動態加載JavaScript(不知道該域具體)?例如,假設我們有兩臺相同的服務器(質量保證和生產),但它們顯然有不同的URL域。有沒有辦法做到像include("myLib.js");這樣的地方,myLib.js會從加載它的文件的域中加載?

對不起,如果這有點令人困惑。

回答

67

的腳本中的腳本:

var scripts = document.getElementsByTagName("script"), 
    src = scripts[scripts.length-1].src; 

這工作,因爲瀏覽器會按順序加載和執行腳本,所以當您的腳本執行時,它所包含的文檔肯定會將腳本元素作爲頁面上的最後一個腳本元素。這段代碼當然必須是腳本的'全局',所以將'src'保存在稍後可以使用的地方。避免在包裝它泄漏全局變量:

(function() { ... })(); 
+4

這是一個很好的建議,只要腳本中的代碼以「內聯」的方式運行(即按照您的建議在全局環境或「立即運行匿名方法」中運行,而不是在「稍後調用」功能或設置超時)。您可以通過這種方式在當前文件/路徑的每個javascript中創建一個var。但是,請注意,「泄漏的全局變量」無法通過我所謂的immediate-run-anon-methods來解決,'(function(){...})();' - 上面的示例仍然會創建一個全局變量叫做'src',因爲它之前沒有'var'說明符 – Graza 2010-02-12 23:14:46

+0

這非常棒。一個問題是,如果我使用jQuery的getScript方法,它會失敗(返回空白)。任何解決方案? – 2010-02-12 23:24:51

+4

'src'有一個var說明符(請參閱第一行末尾的逗號) – InfinitiesLoop 2010-02-12 23:30:34

1

我可能會誤解你的問題,但似乎只要生產和開發服務器使用相同的路徑結構就可以使用相對路徑。

 
<script language="javascript" src="js/myLib.js" /> 
+2

問題是,這個JavaScript庫是要加載到不同的域。 – 2010-02-12 23:12:06

+0

那麼這是一個單一的js庫文件位於一個域需要被拉入多個域?或者,這是一個js文件,駐留在多個域中,需要將其他js文件相對於其源文件拉入其中?你能提供一個你想要完成的例子嗎? – johnmdonahue 2010-02-12 23:17:17

+0

其實兩者。 js文件將駐留在多個域(QA vs生產)中,並且它也將包含在多個域中(無論Web應用程序需要使用該庫)。 – 2010-02-12 23:26:55

0

不管它的腳本,HTML文件(一幀,例如),CSS文件,圖像,不管,如果你指定服務器/域的HTML文檔的路徑是默認的,所以你可以做,例如,

<script type=text/javascript src='/dir/jsfile.js'></script>

<script type=text/javascript src='../../scripts/jsfile.js'></script>

如果不提供服務器/域,路徑將是相對於頁面的路徑或主文檔的路徑

24

除了IE(任何版本),所有瀏覽器都有document.currentScript,它總是始終工作(無論該文件是如何被列入(異步,書籤等))。

如果你想知道你現在是JS文件的完整URL:

var script = document.currentScript; 
var fullUrl = script.src; 

Tadaa。

+0

這真棒,正是我希望找到的! – Markus 2016-01-12 16:38:10

+0

謝謝,我終於找到解決方案! – Alcalyn 2016-04-07 17:41:17

3

我最近發現了一個更簡潔的方法,可以在任何時候執行,而不是在腳本加載時被迫同步執行。

使用stackinfo在當前位置獲取堆棧跟蹤,並從堆棧頂部獲取名稱info.file

info = stackinfo() 
console.log('This is the url of the script '+info[0].file) 
14

如果您的文檔中包含內聯腳本,則此處接受的答案不起作用。爲了避免這種情況,您可以使用以下內容僅針對具有[src]屬性的<script>標籤。

/** 
* Current Script Path 
* 
* Get the dir path to the currently executing script file 
* which is always the last one in the scripts array with 
* an [src] attr 
*/ 
var currentScriptPath = function() { 

    var scripts = document.querySelectorAll('script[src]'); 
    var currentScript = scripts[ scripts.length - 1 ].src; 
    var currentScriptChunks = currentScript.split('/'); 
    var currentScriptFile = currentScriptChunks[ currentScriptChunks.length - 1 ]; 

    return currentScript.replace(currentScriptFile, ''); 
} 

這有效捕捉了最後一個外部.js文件,解決了我在內聯JS模板中遇到的一些問題。

+0

很棒!謝謝!!!。我發現並嘗試了很多解決方案,但沒有獲得積極的結果。 – MarianoVolker 2016-02-18 04:16:41

2

我編寫了一個簡單的函數,它允許通過使用try/catch方法來獲取當前JavaScript文件的絕對位置。您可以看到它here

+0

爲什麼要投票?考慮添加評論以及..反正。 – 2015-07-09 13:26:13

+3

因爲根據規則,你應該在你的答案中解釋解決方案,而不僅僅是鏈接。如果該鏈接消失,那麼你的答案是毫無意義的。 – 2015-08-14 08:07:44

+0

這太棒了,謝謝分享。另外,你可以檢查一下'document.currentScript',以防它被_is_定義。 – alecov 2016-06-02 21:57:15

3

精煉後在這裏找到答案,我想出了以下內容:

getCurrentScript.js

var getCurrentScript = function() { 
    if (document.currentScript) { 
    return document.currentScript.src; 
    } else { 
    var scripts = document.getElementsByTagName('script'); 
    return scripts[scripts.length-1].src; 

    } 
}; 

module.exports = getCurrentScript; 

getCurrentScriptPath.js

var getCurrentScript = require('./getCurrentScript'); 

var getCurrentScriptPath = function() { 
    var script = getCurrentScript(); 
    var path = script.substring(0, script.lastIndexOf('/')); 
    return path; 
}; 

module.exports = getCurrentScriptPath; 

BTW:我使用CommonJS 模塊格式和外殼與webpack

3

我剛纔提出這個小竅門:在

window.getRunningScript =() => { 
    return() => { 
     let err = new Error() 
     let link = err.stack.split('(') 
     link = link[1] 
     link = link.split(')')[0] 
     link = link.split(':') 
     link.splice(-2, 2) 
     link = link.join(':') 

     return link 
    } 
} 

console.log('%c Currently running script:', 'color: blue', getRunningScript()()) 

screenshot

工作:Chrome瀏覽器,火狐,邊緣

享受!

相關問題