有時候我們需要引入一個外部js文件,這個js文件又需要用到自己的路徑或者是所在的目錄,別問怎么又這么變態的需求,開發做久了各種奇葩需求也就有了!
有人第一時間想到的是location.href,可是哥哥,那個引用頁面的路徑啊。比如a.html:
<html> <script src="/b/c.js"></script> </html>
這樣的話我們用location.href獲取到的值是a.html文件本身的路徑,並不是我們需要的c.js的路徑。
那怎么辦?
我先開始想到了一個方法,就是通過js的文件名去匹配,比如我寫一個插件叫做dragondean.js,那么我可以將引用頁(a.html)中所有的script標簽獲取到,然后通過匹配src屬性中是否含有dragondean來獲得我們需要的js文件路徑。
但是這樣一來就有問題了:
1.我們的插件dragondean.js在使用的時候不能被更名。
2.一個插件的js文件重復引用會導致錯誤
這種方式總是沒有一種踏實的感覺...
后來.....我看了一片文章:http://blog.sina.com.cn/s/blog_715fa5c00100pwrj.html
里面提到的思路用到了瀏覽器對網頁加載順序的一個技巧,經過測試確實可行!
原理就是網頁文檔在解析的時候一邊加載一邊解析,當解析到script的時候先下載src中的內容並解析或者解析script中間的內容,然后再往下解析。當解析到當前script的時候我們可以獲取已經加載的所有script標簽,最后一個就是我們需要得到的這個了。
用到的方法代碼如下:
獲取自身的完整路徑:
function getMySrc(){ var scriptSrc = document.getElementsByTagName('script')[document.getElementsByTagName('script').length -1].src; return scriptSrc; }
獲得自身的文件名:
function getMyScriptName(){ var scriptSrc = document.getElementsByTagName('script')[document.getElementsByTagName('script').length -1].src; var jsName = scriptSrc.split('/')[scriptSrc.split('/').length-1]; return jsName; }
獲得自身所在的目錄路徑:
function getMyPath(){ var scriptSrc = document.getElementsByTagName('script')[document.getElementsByTagName('script').length -1].src; var jsName = scriptSrc.split('/')[scriptSrc.split('/').length-1]; return scriptSrc.replace(jsName,''); }
這些內容都是借鑒的前面那篇博文的,只不過做了一個細化!再次感謝原文作者!