给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的获取浏览器窗口大小的代码
Mar 28 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 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采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
详解Node 定时器
2018/02/26 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python如何导入依赖包
2020/07/13 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
九月份红领巾广播稿
2014/01/22 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
网吧管理制度范本
2015/08/05 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python