给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 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
js onclick事件传参讲解
Nov 06 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
ES6关于Promise的用法详解
May 07 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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 模板高级篇总结
2006/12/21 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
php curl常用的5个经典例子
2017/01/20 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
webpack4简单入门实例
2018/09/06 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
国税会议欢迎词
2014/01/16 职场文书
关于旷工的检讨书
2014/02/02 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
五年级作文之学校的四季
2019/12/05 职场文书