在瀏覽器中獲取當(dāng)前執(zhí)行的腳本文件名的代碼
更新時間：2011年07月19日 00:40:49 作者：
同事提了一個問題，如何在瀏覽器中動態(tài)插入的 JavaScript 文件中，獲取當(dāng)前文件名？
背景
同事提了一個問題，如何在瀏覽器中動態(tài)插入的 JavaScript 文件中，獲取當(dāng)前文件名？
除了服務(wù)器輸出一個文件名外，在腳本中獲取應(yīng)該只有下面三種做法。
解法A
普遍的解法，只能用于頁面靜態(tài)scripts標(biāo)簽引入或者單個動態(tài)加載。
var scripts = document.getElementsByTagName('script');
var filename = scripts[scripts.length -1].src;
動態(tài)插入多個腳本標(biāo)簽的情況：
loadScript('b.js?param=1')
loadScript('a.js?param=2')
loadScript('b.js?param=3')
loadScript('a.js?param=4')
/* 輸出
a.js >>> http://localhost:800/io/a.js?param=4
a.js >>> http://localhost:800/io/a.js?param=4
b.js >>> http://localhost:800/io/a.js?param=4
b.js >>> http://localhost:800/io/a.js?param=4
*/
解法B
變態(tài)型，只能工作于FireFox：
try {
throw new Error();
}
catch(exception){
console.log( exception.fileName );
}
解法C
我的解法，操作源代碼：
requireScript('a.js?'+Date.now(),function(text,src) {
console.log('text:',text);
globalEval('(function() { \nvar __filename = "'+ src +'";\n'+ text +'\n;})();');
})
瀏覽器輸出：
<script>(function() {
var __filename = "a.js?1310971812334";
var scripts = document.getElementsByTagName('script');
console.log('a.js',' >>> ',scripts[scripts.length -1].src);
console.log(__filename);
;})();</script>
requireScript('script.coffee',function(text,src) {
if( isCoffeeScript(src) )
globalEval( CoffeeScript.compile(text) );
})
同事提了一個問題，如何在瀏覽器中動態(tài)插入的 JavaScript 文件中，獲取當(dāng)前文件名？
除了服務(wù)器輸出一個文件名外，在腳本中獲取應(yīng)該只有下面三種做法。
解法A
普遍的解法，只能用于頁面靜態(tài)scripts標(biāo)簽引入或者單個動態(tài)加載。
復(fù)制代碼 代碼如下:
var scripts = document.getElementsByTagName('script');
var filename = scripts[scripts.length -1].src;
動態(tài)插入多個腳本標(biāo)簽的情況：
復(fù)制代碼 代碼如下:
loadScript('b.js?param=1')
loadScript('a.js?param=2')
loadScript('b.js?param=3')
loadScript('a.js?param=4')
/* 輸出
a.js >>> http://localhost:800/io/a.js?param=4
a.js >>> http://localhost:800/io/a.js?param=4
b.js >>> http://localhost:800/io/a.js?param=4
b.js >>> http://localhost:800/io/a.js?param=4
*/
解法B
變態(tài)型，只能工作于FireFox：
復(fù)制代碼 代碼如下:
try {
throw new Error();
}
catch(exception){
console.log( exception.fileName );
}
解法C
我的解法，操作源代碼：
復(fù)制代碼 代碼如下:
requireScript('a.js?'+Date.now(),function(text,src) {
console.log('text:',text);
globalEval('(function() { \nvar __filename = "'+ src +'";\n'+ text +'\n;})();');
})
瀏覽器輸出：
復(fù)制代碼 代碼如下:
<script>(function() {
var __filename = "a.js?1310971812334";
var scripts = document.getElementsByTagName('script');
console.log('a.js',' >>> ',scripts[scripts.length -1].src);
console.log(__filename);
;})();</script>
優(yōu)點：可靠、可緩存、可推遲執(zhí)行、可擴(kuò)展。
限制：1）變量命名被約定為“__filename”；2）同源策略。
又想到這個加載策略用來加載流行的 CoffeeScript，比如：
復(fù)制代碼 代碼如下:
requireScript('script.coffee',function(text,src) {
if( isCoffeeScript(src) )
globalEval( CoffeeScript.compile(text) );
})
鏈接
Passing JavaScript arguments via the src attribute
查看或下載
https://gist.github.com/1088730
相關(guān)文章
下面小編就為大家?guī)硪黄狫S實現(xiàn)回到頁面頂部動畫效果的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript實現(xiàn)寫入文件到本地的方法【基于FileSaver.js插件】
這篇文章主要介紹了JavaScript實現(xiàn)寫入文件到本地的方法,結(jié)合實例形式分析了基于FileSaver.js插件實現(xiàn)保存文件到本地的相關(guān)操作技巧,并附帶FileSaver.js插件完整源碼,需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab標(biāo)簽頁，可點擊切換，滑動切換頁面,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了JavaScript框架是什么?怎樣才能叫做框架？,本文講解了什么是 JavaScript 框架、JavaScript 框架的典型特性等內(nèi)容,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了Javascript中的高階函數(shù)介紹,本文講解了什么是高階函數(shù)、Javascript的高階函數(shù)、還原高階函數(shù)、高階函數(shù)使用實例等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js實現(xiàn)課堂隨機(jī)點名系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript獲取地址欄參數(shù)的方法實現(xiàn)
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實現(xiàn),項目中經(jīng)常遇到獲取上個頁面跳轉(zhuǎn)過來獲取當(dāng)前的參數(shù),文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些
代碼規(guī)范并不是一種編寫正確JavaScript代碼的規(guī)則，而是為了保持源代碼編寫模式一致的一種選擇。這篇文章給大家介紹了關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些，感興趣的朋友一起看看吧2018-04-04
皓月當(dāng)空,月圓中秋,在這個傳統(tǒng)節(jié)日里,除了賞月、猜燈謎、賞花燈等習(xí)俗外,還有就是品嘗美味的月餅,本文就來使用canvas繪制一個精美的月餅吧2023-09-09
最近在學(xué)習(xí)three.js，這篇文章屬于系列文章，下面這篇文章主要給大家介紹了關(guān)于Three.js如何繪制字體模型的相關(guān)資料，通過文中介紹的方法實現(xiàn)的效果非常的贊，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09