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


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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python实现的Iou与Giou代码
2020/01/18 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
介绍一下grep命令的使用
2015/06/12 面试题
施工安全协议书
2013/12/11 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
初三学生评语大全
2014/04/24 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
离婚财产分割协议书
2015/08/11 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android