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


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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
Vue组件中slot的用法
Jan 30 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
浅谈Python中带_的变量或函数命名
2017/12/04 Python
python保存网页图片到本地的方法
2018/07/24 Python
python实现简单的文字识别
2018/11/27 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
python开发制作好看的时钟效果
2022/05/02 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js