给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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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中var_dump方法的使用详解
2013/06/24 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
接收键盘指令的脚本
2006/06/26 Javascript
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
python在非root权限下的安装方法
2018/01/23 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
小学中等生评语
2014/12/29 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书