给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 相关文章推荐
基于jquery的跨域调用文件
Nov 19 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
AngularJS实现表单验证
Jan 28 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
用js实现放大镜效果
Oct 28 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代码优化之成员变量获取速度对比
2014/02/28 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php-app开发接口加密详解
2018/04/18 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python将list转为matrix的方法
2018/12/12 Python
python如何提升爬虫效率
2020/09/27 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
婚前协议书怎么写
2014/04/15 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
国庆节慰问信
2015/02/15 职场文书
聘任书范文大全
2015/09/21 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python