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

背景
同事提了一个问题，如何在浏览器中动态插入的 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

赞 (0)

相关推荐

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

    背景 同事提了一个问题,如何在浏览器中动态插入的 JavaScript 文件中,获取当前文件名? 除了服务器输出一个文件名外,在脚本中获取应该只有下面三种做法. 解法A 普遍的解法,只能用于页面静态scripts标签引入或者单个动态加载. 复制代码 代码如下: var scripts = document.getElementsByTagName('script'); var filename = scripts[scripts.length -1].src; 动态插入多个脚本标签的情况: 复制

  • 浏览器中视频播放器实现的基本思路与代码

    浏览器中视频播放器实现的基本思路与代码

    目录 前言 浏览器中的音视频知识总结 视频编码 封装格式 音视频标签 常用属性 常用事件 常用方法 整体思路如下 代码实现 总结 前言 自定义个播放器,组件都是用的原生的,所以有点丑,重点关注业务逻辑吧. 界面大概长下面这个样子. 大家可以看着界面,在脑海中想一下自己会如何实现这个视频播放器.可以问自己以下几个问题: 这个组件会接受那些props 如何获取视频的基本信息,包括时长,分辨率等 暂停.播放如何实现 拖动进度条的逻辑如何实现 视频初始加载显示loading如何处理 视频播放过程中卡顿显

  • 在IE浏览器中resize事件执行多次的解决方法

    这是个让人每次改变页面窗口的大小时很郁闷的方法,尤其在IE浏览器中,稍微动下窗口边框,就会触发很多次事件.更让人蛋疼的是在resize事件中包含某些页面内容处理或计算导致resize事件再次被触发的时候,IE会随机陷入假死状态. 网上找了好久,都是千律一篇的,到处都是转载的一个方法:以下是网上找到的一个解决方法: 复制代码 代码如下: var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeo

  • js类中获取外部函数名的方法与代码

    比如我们要在一个类中设定一个方法可以根据调入一个方法保存在类变量中,等需要的时候可以通过访问类变量来得到. 通常如果我们生成一个实例 如:var temp=new TopnetTree(); 如果我们通过设定属性的方式来传入一个方法,会发现传入的是一个函数的内容,而非函数名. 如temp.fileAction=fnTest; //fnTest是一个函数 于是偶就写了一个方法来实现此功能. 通过arguments来判断判断传入内容: 实现如下功能: 传入内容为空,不执行任何内容 传入一个参数,则表

  • Java中获取文件大小的详解及实例代码

    Java中获取文件大小的详解及实例代码

     Java 获取文件大小 今天写代码时需要实现获取文件大小的功能,目前有两种实现方法,一种是使用File的length()方法:另外一种是使用FileInputStream的available()方法,当InputStream未进行read操作时,available()的大小应该是等于文件大小的.但是在处理大文件时,后者会发生问题.我们来看一下: 在例子中,我使用了CentOS 6.5 的安装镜像文件,主要是考虑到这个文件足够大(大于2GB). 1.使用File的length()方法 publi

  • 从textarea中获取数据之后按原样显示实现代码

    步骤: 1. 用<pre><c:out value="<%=从数据库显示的字段%>"></c:out></pre> 2. 显示页面中增加: 复制代码 代码如下: <style type="text/css"> pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space:

  • Linux中执行shell脚本的4种方法总结

    bash shell 脚本的方法有多种,现在作个小结.假设我们编写好的shell脚本的文件名为hello.sh,文件位置在/data/shell目录中并已有执行权限. 方法一:切换到shell脚本所在的目录(此时,称为工作目录)执行shell脚本: 复制代码 代码如下: cd /data/shell ./hello.sh ./的意思是说在当前的工作目录下执行hello.sh.如果不加上./,bash可能会响应找到不到hello.sh的错误信息.因为目前的工作目录(/data/shell)可能不在

  • python获取程序执行文件路径的方法(推荐)

    1.获取当前执行主脚本方法:sys.argv[0]和_ file _ (1)sys.argv 一个传给Python脚本的指令参数列表.sys.argv[0]是脚本的名字.一般得到的是相对路径,用os.path.abspath(sys.argv[0])得到执行文件的绝对路径: dirname, filename = os.path.split(os.path.abspath(sys.argv[0])) os.path.realpath(sys.argv[0]) 如果在命令行执行sys.argv返回

  • vue 解决在微信内置浏览器中调用支付宝支付的情况

    我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转页面 第一步: payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码: let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == "

  • js在浏览器中的event loop事件队列示例详解

    js在浏览器中的event loop事件队列示例详解

    目录 前言 认识一个栈两个队列 执行过程 简单例子 难一点的例子 总结 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过程 js就是

随机推荐