背景
同事提了一個(gè)問題，如何在瀏覽器中動態(tài)插入的 JavaScript 文件中，獲取當(dāng)前文件名？

除了服務(wù)器輸出一個(gè)文件名外，在腳本中獲取應(yīng)該只有下面三種做法。

解法A
普遍的解法，只能用于頁面靜態(tài)scripts標(biāo)簽引入或者單個(gè)動態(tài)加載。

復(fù)制代碼代碼如下:

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

動態(tài)插入多個(gè)腳本標(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)點(diǎn)：可靠、可緩存、可推遲執(zhí)行、可擴(kuò)展。
限制：1）變量命名被約定為“__filename”；2）同源策略。
又想到這個(gè)加載策略用來加載流行的 CoffeeScript，比如：

復(fù)制代碼代碼如下:

 
requireScript('script.coffee',function(text,src) { 
if( isCoffeeScript(src) ) 
globalEval( CoffeeScript.compile(text) ); 
}) 

鏈接

Cross-Origin Resource Sharing

Passing JavaScript arguments via the src attribute

CoffeeScript

查看或下載

https://gist.github.com/1088730

相關(guān)文章

JS實(shí)現(xiàn)回到頁面頂部動畫效果的簡單實(shí)例
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)回到頁面頂部動畫效果的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JavaScript實(shí)現(xiàn)寫入文件到本地的方法【基于FileSaver.js插件】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)寫入文件到本地的方法,結(jié)合實(shí)例形式分析了基于FileSaver.js插件實(shí)現(xiàn)保存文件到本地的相關(guān)操作技巧,并附帶FileSaver.js插件完整源碼,需要的朋友可以參考下
2018-03-03
小程序?qū)崿F(xiàn)tab標(biāo)簽頁
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab標(biāo)簽頁，可點(diǎn)擊切換，滑動切換頁面,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
JavaScript框架是什么?怎樣才能叫做框架？
這篇文章主要介紹了JavaScript框架是什么?怎樣才能叫做框架？,本文講解了什么是 JavaScript 框架、JavaScript 框架的典型特性等內(nèi)容,需要的朋友可以參考下
2015-07-07
Javascript中的高階函數(shù)介紹
這篇文章主要介紹了Javascript中的高階函數(shù)介紹,本文講解了什么是高階函數(shù)、Javascript的高階函數(shù)、還原高階函數(shù)、高階函數(shù)使用實(shí)例等內(nèi)容,需要的朋友可以參考下
2015-03-03
js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)
這篇文章主要介紹了js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JavaScript獲取地址欄參數(shù)的方法實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實(shí)現(xiàn),項(xiàng)目中經(jīng)常遇到獲取上個(gè)頁面跳轉(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
js使用canvas實(shí)現(xiàn)繪制月餅
皓月當(dāng)空,月圓中秋,在這個(gè)傳統(tǒng)節(jié)日里,除了賞月、猜燈謎、賞花燈等習(xí)俗外,還有就是品嘗美味的月餅,本文就來使用canvas繪制一個(gè)精美的月餅吧
2023-09-09
Three.js實(shí)現(xiàn)繪制字體模型示例代碼
最近在學(xué)習(xí)three.js，這篇文章屬于系列文章，下面這篇文章主要給大家介紹了關(guān)于Three.js如何繪制字體模型的相關(guān)資料，通過文中介紹的方法實(shí)現(xiàn)的效果非常的贊，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09