给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 判断 object 的特定类转载
Feb 01 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
canvas绘制环形进度条
Feb 23 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
JS中验证整数和小数的正则表达式
Oct 08 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
如何隐藏你的.php文件
2007/01/04 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php后门URL的防范
2013/11/12 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Python中datetime模块参考手册
2017/01/13 Python
神经网络python源码分享
2017/12/15 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
10款最好的Python开发编辑器
2019/07/03 Python
Python内置函数及功能简介汇总
2020/10/13 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
普师专业个人自荐信范文
2013/11/26 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
护理专业自荐信范文
2015/03/06 职场文书
个人总结格式范文
2015/03/09 职场文书
大国崛起观后感
2015/06/02 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
妇产科护理心得体会
2016/01/22 职场文书
如何拟写通知正文?
2019/04/02 职场文书