给JavaScript文件传入参数的几种方法
一、利用全局变量
这是最简单的一种方式,比如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>
<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];
方法四比方法二更灵巧天才。 从代码的精简和性能上讲,方法三 > 方法 一 > 方法四 > 方法二 小结:如果你很在意标准,推荐方法四;如果和我一样觉得没必要完全遵守标准,推荐方法三。
三、灵感方案
如果你和我一样是John Resig的忠实fans,或许还记得去年8月份讨论得很火爆的《Degrading Script Tags》。John Resig给我们开启了一扇想象的门,对于本文的问题来说,还可以用以下“邪门歪道”来实现:
<script type="text/javascript" src="test.js"> TB.SomeApp.scriptArgs = 'a=b&c=d'; </script>
TB = {}; TB.SomeApp = {}; var scripts = document.getElementsByTagName("script"); eval(scripts[ scripts.length - 1 ].innerHTML);
<script type="text/javascript" src="test.js">a=b&c=d</script>
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文件传入参数的几种方法的更多相关文章
- Python传入参数的几种方法
写在前面 Python唯一支持的参数传递方式是『共享传参』(call by sharing) 多数面向对象语言都采用这一模式,包括Ruby.Smalltalk和Java(Java的引用类型是这样,基本 ...
- 用javascript获得地址栏参数的两种方法
javascript获得地址栏参数. 方法1: <script language="JavaScript"> //取地址栏参数 <!-- function Req ...
- 命令行向php传入参数的两种方法
##$argv or $argc $argv 包含当运行于命令行下时传递给当前脚本的参数的数组. $argv[0] 就是脚本文件名. $argc 包含当运行于命令行下时传递给当前脚本的参数的数目 ...
- javascript取url参数的几种方法
//获取QueryString的数组 function getQueryString() { var result = location.search.match(new RegExp("[ ...
- shell中调用R语言并传入参数的两种步骤
shell中调用R语言并传入参数的两种方法 第一种: Rscript myscript.R R脚本的输出 第二种: R CMD BATCH myscript.R # Check the output ...
- 命令行运行Python脚本时传入参数的三种方式
原文链接:命令行运行Python脚本时传入参数的三种方式(原文的几处错误在此已纠正) 如果在运行python脚本时需要传入一些参数,例如gpus与batch_size,可以使用如下三种方式. pyth ...
- HttpServletRequest接收参数的几种方法
HttpServletRequest接收参数的几种方法 我们经常用servlet和jsp, 经常用request.getParameter() 来得到数据. request.getParameter( ...
- PHP中获取文件扩展名的N种方法
PHP中获取文件扩展名的N种方法 从网上收罗的,基本上就以下这几种方式: 第1种方法:function get_extension($file){substr(strrchr($file, '.'), ...
- JSON文件加注释的7种方法
JSON文件加注释的7种方法 缺省不能加注释,现实有需求 根据JSON规范(http://www.json.org, RFC 4627, RFC 7159),不支持注释.JSON规范之所以不允许加注释 ...
随机推荐
- B-树 C++模板类封装(有图有真相)
定义: 一棵m阶B-树是拥有以下性质的多路查找树: 1.非叶子结点的根结点至少拥有两棵子树: 2.每一个非根且非叶子的结点含有k-1个关键字以及k个子树,其中⌈m/2⌉≤k≤m: 3.每一个叶子结点都 ...
- iOS_数据存取(一)
目录: 一.沙盒机制 二.用户偏好设置 三.归档 一.沙盒机制 每个iOS应⽤都有⾃己的应用沙盒(应⽤沙盒就是⽂件系统⽬录),与其他文件系统隔离.应⽤必须待在⾃己的沙盒⾥,其他应用不能访问该应用沙盒的 ...
- ANSI C和POSIX
简单的说 ANSI C:标准C API(对应fopen) POSIX:方便在Linux下运行的C API(对应open)
- Android LCD(二):常用接口原理篇【转】
本文转载自:http://blog.csdn.net/xubin341719/article/details/9125799 关键词:Android LCD TFT TTL(RGB) LVDS E ...
- Cisco学习笔记
目录 1. 路由 1.1 静态路由 1.2 动态路由 2. 访问控制列表 2.1 标准访问控制列表 2.2 扩展访问控制列表 2.3 命名访问控制列表 3. VLAN 3.1 基础知识 3.2 配置实 ...
- 【FINAL】NOI
我就是复习一下..根本就不是什么题解...谁也看不懂的... NOI2007 社交网络 最短路 货币兑换 斜率优化动态规划 项链工厂 线段树 生成树计数 ...
- Qt QTreeWidget节点的添加+双击响应+删除详解
转自: http://www.cnblogs.com/Romi/archive/2012/08/08/2628163.html 承接该文http://www.cnblogs.com/Romi/arch ...
- 解决Android7.1.1中无法打开/data目录的问题
声明:本技巧借鉴https://segmentfault.com/a/1190000008416511这个大神的文章 一.复制android Sdk安装目录的platform-tools路径: 二.w ...
- getchar与scanf区别
scanf可以一次按照设定的输入格式输入多个变量数据.如int d,float f,char str[20],scanf("%d%f%s",d,f,str); getchar()只 ...
- js备忘录模式
备忘录(Memento):在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态. 备忘录模式比较适用于功能比较复杂的,但需要维护或记录属性 ...