给js文件传递参数
一、利用全局变量
这是最简单的一种方式,比如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'));
}
本篇文章属于转载,很好的文章,拿来收藏一下。
原文链接:http://www.cnblogs.com/sking7/archive/2011/11/23/2260572.html
给js文件传递参数的更多相关文章
- easyUi 框架中的JS文件传递参数的区别
1.情景一 //JS文件 ajax的请求url : parent.baseUrl+"user/customer/findOne/" + id, //后台JAVA代码接收参数 @Re ...
- 如何给外部引用的js文件传递参数
1.定义全局变量 <script language="javascript"> var g = "I'm here"; </script> ...
- 获取js 文件传递的参数并使用json2进行json数据转换
主要的技术就不用详细进行介绍了,就是使用js文件进行参数的传递,用途有一下几个: 1,进行js的版本控制. 2,获取参数并,进行一些额外功能的添加(比如使用js 进行用户验证,设计开发API (一些开 ...
- jquery 、 JS 脚本参数的认识与使用
jquery . JS 脚本参数的认识与使用 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面. par ...
- (转)js函数参数设置默认值
原文:http://www.cnblogs.com/RightDear/archive/2013/06/26/3156652.html js函数参数设置默认值 php有个很方便的用法是在定义函数时 ...
- js 函数参数形式
1. var a = function(b,c){ console.log(arguments);}a("1","cc"); -> ["1&q ...
- js动态参数作为Object的属性取值
js动态参数作为Object的属性取值var myObj = {"a":1,"b":2};var a = 'a';myObj[a] 就可以获取到 属性a的值了
- JS 可变参数
JS可变参数的方法不需要参数,同时,我们应该注意在写JS文件的时候避免定义arguments变量. <html> <head> <title>Javascri ...
- 获取js连接参数js_args
获取js连接参数,如下以链接: <script src="js/jscript.js?skin=green" type="text/javascript" ...
随机推荐
- codevs1041
codevs 1041 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速铁路,第I个城市中高 ...
- currentStyle、getComputedStyle
element.offsetWidth: 返回元素的宽度,包括边框和内边距. element.offsetHeight: 返回元素的高度,包括边框和内边距. currentStyle: 获取计算后的样 ...
- node.js安装以及相关配置
安装: 首先需要进行安装.关于如何安装Node.js,这里就不赘述了,可以直接参考官方的安装指南.安装到指定盘后(以下内容以D盘为例),就开始进行相关配置. 配置: 首先配置环境变量:我的电脑--&g ...
- C语言静态函数静态变量
C语言程序可以看成由一系列外部对象构成,这些外部对象可能是变量或函数.而内部对象是指定义在函数内部的函数参数及变量. 外部变量定义在函数之外,因此可以在许多函数中使用.由于C语言不允许在一个函数中定义 ...
- 第二章 andrid studio创建项目
原文 http://blog.csdn.net/zhanghefu/article/details/9326735 第二章 andrid studio创建项目 第二章 andrid studio创建项 ...
- rhel6.4 配置本地yum的源
1 创建rhel-debuginfo.repo,如果有则先备份再删除 cd /etc/yum.repos.d rm rhel-debuginfo.repo vi rhel ...
- Balls Rearrangement(HDU)
Problem Description Bob has N balls and A boxes. He numbers the balls from 0 to N-1, and numbers the ...
- iOS多线程系列(3)
在2011的WWDC上,苹果推出了GCD,从此多线程增加了一种新的方法.GCD要求运行在iOS4.0版本以上或者OS X10.6版本以上.GCD是Grand Central Dispatch的缩写,是 ...
- 黑马程序员_static\访问权限\单例模式 大汇总
一.static关键字 1.用法 Static是一个修饰符,用于修饰成员,包括成员变量和成员函数.当成员被静态修饰后,就多了一种调用方式,除了可以被对象调用外,还可以直接被类名调用.System.ou ...
- java常量池理解
String类两种不同的创建方式 String s1 = "zheng"; //第一种创建方式 String s2 = new String("junxiang" ...