给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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
vue+element表格导出为Excel文件
Sep 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中的cookie
2006/11/26 PHP
PHP 已经成熟
2006/12/04 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
获取远程文件大小的php函数
2010/01/11 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php文件上传的两种实现方法
2016/04/04 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
javascript使用链接跨域下载图片
2019/11/01 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
学生信息管理系统python版
2018/10/17 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python中url标签使用知识点总结
2020/01/16 Python
Django框架请求生命周期实现原理
2020/11/13 Python
基于Python实现天天酷跑功能
2021/01/06 Python
露营世界:Camping World
2017/02/02 全球购物
人代会标语
2014/06/30 职场文书
农村党员对照检查材料
2014/09/24 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
股份转让协议书范本
2015/01/27 职场文书
总经理岗位职责范本
2015/04/01 职场文书