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


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 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
js实现文字滚动效果
Mar 03 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
es6中let和const的使用方法详解
Feb 24 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
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
python基础教程之Filter使用方法
2017/01/17 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
缓刑人员的思想汇报
2014/01/11 职场文书
婚庆公司计划书
2014/09/15 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
企业战略合作意向书
2015/05/08 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
SQL中的三种去重方法小结
2021/11/01 SQL Server