在浏览器中获取当前执行的脚本文件名的代码


Posted in Javascript onJuly 19, 2011

背景
同事提了一个问题,如何在浏览器中动态插入的 JavaScript 文件中,获取当前文件名?

除了服务器输出一个文件名外,在脚本中获取应该只有下面三种做法。

解法A
普遍的解法,只能用于页面静态scripts标签引入或者单个动态加载。

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

动态插入多个脚本标签的情况:
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
变态型,只能工作于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>

优点:可靠、可缓存、可推迟执行、可扩展。
限制:1)变量命名被约定为“__filename”;2)同源策略。
又想到这个加载策略用来加载流行的 CoffeeScript,比如:

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

Javascript 相关文章推荐
jquery.tmpl JQuery模板插件
Oct 10 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
iframe 异步加载技术及性能分析
Jul 19 #Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 #Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 #Javascript
JS仿flash上传头像效果实现代码
Jul 18 #Javascript
js中的string.format函数代码
Aug 11 #Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 #Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 #Javascript
You might like
消息持续发送的完整例子
2006/10/09 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python处理csv中的空值方法
2018/06/22 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
财务工作失职检讨书
2014/11/21 职场文书