多种思路给js文件传递参数

來源：http://www.himm.cn/blog/post/11.html

一、利用全局变量

这是最简单的一种方式，比如Google Adsense:

缺点是引入了全局变量。

其中引入文件的方式还有两个变体：

// 变体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元素的src
和全部变量相比，我们更希望能像下面这样传入参数：

方法一是给script添加id属性，通过id得到当前script，再用正则从src中取出参数。缺点是HTML 4.01 Specification里，SCRIPT元素没有id属性。这个缺点也算不得是缺点，毕竟尽信标准不如无标准。

方法二是用js的文件名当作钩子，js代码里通过document.getElementsByTagName('script')后，正则匹配出当前js文件。这个方法很正统，但要求文件名唯一。缺点是代码多，不精炼，对性能也稍有影响。

方法三是在方法一的基础上，干脆再添加一个自定义属性data：

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给我们开启了一扇想象的门，对于本文的问题来说，还可以用以下“邪门歪道”来实现：

TB = {}; TB.SomeApp = {};
var scripts = document.getElementsByTagName("script");
eval(scripts[ scripts.length - 1 ].innerHTML);
这样就将参数存储到了TB.SomeApp.scriptArgs变量里。

当参数不多时，甚至可以这样：

var scripts = document.getElementsByTagName("script");
var scriptArgs = scripts[ scripts.length - 1 ].innerHTML.replace(/[s]/g, '');
想象是无止境的，还可以利用onload:

TB = {};
TB.SomeFun = function(arg) { //code };
上面的代码在非ie浏览器下，都能正确运行。针对笨笨的ie，还得加几行代码：

if(window.ActiveXObject) {
var scripts = document.getElementsByTagName('script');
eval(scripts[scripts.length - 1].getAttribute('onload'));
}
只要继续发扬挖掘精神，我相信还有更多灵感方案-.-

多种思路给js文件传递参数相关推荐

python爬虫：关于解决request.get和点击查看网页源代码的内容不同的问题//及大神版js加密参数获取教程指路
首先声明:爬虫小白,虽然爬过几个网站,但是知识几乎都是实践中获取,如果以下说的不对的,请多指正,谢谢!谨此给和我一样的小白提供一个解题思路! 目录问题背景菜鸡版解决方案大神版js加密参数获取教程 ...
js url参数的获取和设置以及删除
js url参数的获取和设置以及删除 //获取url参数的值:name是参数名function getQueryString(name) {var reg = new RegExp("(^| ...
js showModalDialog参数的使用详解（转）
js showModalDialog参数的使用详解_javascript技巧_脚本之家 http://www.jb51.net/article/45281.htm 本篇文章主要是对js中showMod ...
ajax参数中有加号,浅谈在js传递参数中含加号(+)的处理方式
一般情况下,URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+). 但是对于带有中文的参数 ...
Python爬虫：爬取instagram，破解js加密参数
Python爬虫:爬取instagram,破解js加密参数 instagram 是国外非常流行的一款社交网站,类似的还有像facebook.twitter,这些社交网站对于掌握时事热点.电商数据来源和 ...
第十八篇 JS传参数
JS传参数参数,这是个什么东西呢?简单的说吧,我们去玩别人的网站,一般来个登录,有用户名和密码,当我们输入正确之后,那么这用户名和密码里面的值,就是参数的值,它将这个值传给"参数" ...
css和js带参数v或version
[转自:https://www.cnblogs.com/pizitai/p/6650450.html] <span style="font-size:14px;">cs ...
js携带参数实现页面跳转
js携带参数页面跳转方法一:跳转路径携带参数第一个页面: location.replace("user.html?username=" + username + "& ...
剑指Offer(Python多种思路实现):树的子结构
剑指Offer(Python多种思路实现):树的子结构面试26题: 题目:树的子结构题:输入两棵二叉树A和B,判断B是不是A的子结构. 解题思路一:递归,注意空指针的情况. class Solut ...

多种思路给js文件传递参数

多种思路给js文件传递参数相关推荐

最新文章

热门文章