给js文件传参数(详解)


Posted in Javascript onJuly 13, 2014

一、利用全局变量

这是最简单的一种方式,比如Google Adsense:

<script type="text/javascript"> google_ad_client ='pub-3741595817388494'; </script> <script type="text/javascript" src="http://pagead2. googlesyndication.com/pagead/show_ads.js"></script>

缺点是引入了全局变量。其中引入文件的方式还有两个变体:

// 变体1:用document.write输出
 <script type="text/javascript"> google_ga_id ='g6u7un8646xx'; 
document.write(unescape('%3Cscript type="text/javascript" src= "http://www.google-analytics.com/ga.js"%3E%3C/script%3E')); </script> 
// 变体2:用DOM操作append到head里 
<script type="text/javascript"> 
G_BEACON_ATP ='category=&userid=&channel=112ad_id=';
 document.getElementsByTagName('head')[0].appendChild(document. createElement('script')).src='http://taobao.com/atp.js'; 
</script> // 注意:上面的代码是根据实际应用虚拟的示范代码

注:变体1应用很多,常见写法如下:

<script type="text/javascript"> 
// 直接转义即可: 
document.write('<script type="text/javascript" src="test.js"></script>'); 
// 或者像Yahoo!首页一样: 
document.write('<scr'+'ipt type="text/javascript" src="test.js"></scr'+'ipt>');
</script>

二、获取并解析script元素的src

和全部变量相比,我们更希望能像下面这样传入参数:

<script type="text/javascript" src="test.js?a=b&c=d"></script>

核心问题是如何获取到src属性。

方法一是给script添加id属性,通过id得到当前script,再用正则从src中取出参数。缺点是HTML 4.01 Specification里,SCRIPT元素没有id属性。这个缺点也算不得是缺点,毕竟尽信标准不如无标准。

方法二是用js的文件名当作钩子,js代码里通过document.getElementsByTagName('script')后,正则匹配出当前js文件。这个方法很正统,但要求文件名唯一。缺点是代码多,不精炼,对性能也稍有影响。

方法三是在方法一的基础上,干脆再添加一个自定义属性data:

<script id="testScript" type="text/javascript" src="test.js" data="a=b&c=d"></script>

test.js文件里,通过下面这行得到传入的参数:

var scriptArgs = document.getElementById('testScript').getAttribute('data');方法四是利用js的顺序执行机制(js文件的加载可以是同步或异步方式,但执行时,一定是按照在文档流中的顺序来执行的)。当某个js文件执行时,一定是“已加载”的js文件中的最后一个:

var scripts = document.getElementsByTagName('script'); var currentScript = scripts[scripts.length - 1];方法四比方法二更灵巧天才。

从代码的精简和性能上讲,方法三 > 方法 一 > 方法四 > 方法二

小结:如果你很在意标准,推荐方法四;如果和我一样觉得没必要完全遵守标准,推荐方法三。

写了个测试程序

<!DOCTYPE html>
<html>
<script src="a2.js">
</script>
<script src="a2.js">
</script>
<script src="a2.js">
</script>
</html>

a2.js

var scripts = document.getElementsByTagName('script'); var currentScript = scripts.length;alert(currentScript);

分别打印出 

1 2 3

三、灵感方案

如果你和我一样是John Resig的忠实fans,或许还记得去年8月份讨论得很火爆的《Degrading Script Tags》。John Resig给我们开启了一扇想象的门,对于本文的问题来说,还可以用以下“邪门歪道”来实现:

<script type="text/javascript" src="test.js"> TB.SomeApp.scriptArgs ='a=b&c=d'; </script>

在test.js文件里:

TB = {}; TB.SomeApp = {}; 
var scripts = document.getElementsByTagName("script");
eval(scripts[ scripts.length - 1 ].innerHTML);

这样就将参数存储到了TB.SomeApp.scriptArgs变量里。

当参数不多时,甚至可以这样:

<script type="text/javascript" src="test.js">a=b&c=d</script>

js文件里:

var scripts = document.getElementsByTagName("script"); 
var scriptArgs = scripts[ scripts.length - 1 ].innerHTML.replace(/[s]/g, '');

想象是无止境的,还可以利用onload:

<script type="text/javascript" src="test.js" onload="TB.SomeFun('a=b&c=d')"></script>

js文件里定义好函数即可:

TB = {}; 
TB.SomeFun = function(arg) { 
//code
};

上面的代码在非ie浏览器下,都能正确运行。针对笨笨的ie,还得加几行代码:

if(window.ActiveXObject) { 
var scripts = document.getElementsByTagName('script'); 
eval(scripts[scripts.length - 1].getAttribute('onload'));
}
Javascript 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
详解创建自定义的Angular Schematics
Jun 06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 #Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 #Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 #Javascript
常用jQuery选择器总结
Jul 11 #Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 #Javascript
js动态改变select选择变更option的index值示例
Jul 10 #Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 #Javascript
You might like
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
Python模块常用四种安装方式
2020/10/20 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
硕士研究生求职自荐信范文
2014/03/11 职场文书
企业安全生产承诺书
2014/05/22 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
如何拟写通知正文?
2019/04/02 职场文书