给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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
js切换div css注意的细节
Dec 10 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
原生JS实现留言板
Mar 26 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仿discuz分页效果代码
2008/10/02 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue组件生命周期详解
2017/11/07 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python爬取成语接龙类网站
2018/10/19 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
linux面试相关问题
2012/08/11 面试题
最受欢迎的自我评价
2013/12/22 职场文书
元旦晚会感言
2014/03/12 职场文书
大学活动总结范文
2014/04/29 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL