给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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
详解angular element()方法使用
2017/04/08 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python 实现生成均匀分布的点
2019/12/05 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
图书馆标语
2014/06/19 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
基层工作经历证明
2015/06/19 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
golang中的并发和并行
2021/05/08 Golang
Python字符串常规操作小结
2022/04/03 Python