JS魔法堂：獲取當前腳本文件的絕對路徑 - fsjohnhuang－IT工程師數位筆記本

文章出處

一、前言　　　　　　　　　　　　　　　　　　　　　　　　

當寫模塊加載器時，獲取當前腳本文件的絕對路徑作為基礎路徑是必不可少的一步，下面我們一起來探討一下這個問題吧！

二、各大瀏覽器的實現方式　　　　　　　　　　　　　　　　

[a]. Chrome和FF

超簡單的一句足矣！

var getCurrAbsPath = function(){
    return document.currentScript.src;
};

這里利用了對象 document.currentScript ，它返回的是當前執行的script元素；然后調用script元素的src屬性即可獲取腳本文件的絕對路徑。

[b]. IE10+、Safari和Opera9

利用Error對象的stack屬性(IE10+)、sourceURL屬性(Safari)和stacktrace屬性(Opera9)萃取絕對路徑

var getCurrAbsPath = function(){
    var a = {}, stack;
    try{
      a.b();
    }
    catch(e){
      stack = e.stack || e.sourceURL || e.stacktrace; 
    }
    var rExtractUri = /(?:http|https|file):\/\/.*?\/.+?.js/, 
        absPath = rExtractUri.exec(stack);
    return absPath[0] || '';
};

[C]. IE5.5~9

遍歷文檔中的script標簽

var getCurrAbsPath = function(){
    var scripts = document.scripts;
    var isLt8 = ('' + document.querySelector).indexOf('[native code]') === -1;
    for (var i = scripts.length - 1, script; script = scripts[i--];){
       if (script.readyState === 'interative'){
          return isLt8 ? script.getAttribute('src', 4) : script.src;   
       }
    }
};

三、相關知識介紹　　　　　　　　　　　　　　　　　　　　　　

IE5.5~9下script的readyState表示該script元素的狀態，分別有以下的狀態值：

uninitialized：未初始化

loading：正在加載

loaded：加載完成

interative：執行中

complete：執行完

可通過訂閱onreadystatechange事件來監聽script元素狀態的變化。但不幸的是loaded和complete狀態并出現順序不定且有可能僅出現其中一個，因此建議在動態添加script元素時，先設置src屬性后再將script元素添加到DOM樹中，這樣loaded和complete狀態僅會出現其中一個（雖然每次請求時，哪個出現是不定的），比較好監測。

四、IE和FF下的另一種方式　　　　　　　　　　　　　　　　

通過訂閱 window.onerror 事件，事件處理函數將接受三個參數，分別是msg,url和num。這里url就是當前腳本的絕對路徑了。

五、總結　　　　　　　　　　　　　　　　　　　　　　　　

完整的getCurrAbsPath請瀏覽https://github.com/fsjohnhuang/getCurrAbsPath/blob/master/lib/getCurrAbsPath.js

尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/3903607.html，^_^肥仔John

文章列表