JS 文件传参及处理技巧分析
更新时间：2010年05月13日 17:32:53 作者：
其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。
解决思路：
1、首先获取到当前JS文件的SRC属性，这里有一个小技巧：我们只需要获取当前页面最后一个script标记内容即可。
为什么？？因为JS是顺序解析的，当前JS脚本解析时后面的js都还没有解析到，当然就认为自己就是最后一个script了。此外，这样获取还有一个好处：我们可以多次引用同一个文件且传入不同的参数，这样可以在js文件中根据参数不同做不同处理，很巧妙把！简直就是动态语言了。
代码如下：
var scripts=document.getElementsByTagName("script");
var curJS=scripts[scripts.length-1]; //curJS就是我们当前的js文件
得到这个就好办了，通过curJS.src即可获取到完整的路径内容（包括参数）。
2、下面的就是解析参数内容了，解析的过程相当简单，相信很多人都容易完成这一步。
但我们要对一个特殊情况进行处理：如果一个参数被传入了多次，则要将该参数值转换为数组存储每一个传入的值。
完整测试脚本如下：
var getArgs=(function(){
var sc=document.getElementsByTagName('script');
var paramsArr=sc[sc.length-1].src.split('?')[1].split('&');
var args={},argsStr=[],param,t,name,value;
for(var i=0,len=paramsArr.length;i<len;i++){
param=paramsArr[i].split('=');
name=param[0],value=param[1];
if(typeof args[name]=="undefined"){ //参数尚不存在
args[name]=value;
}else if(typeof args[name]=="string"){ //参数已经存在则保存为数组
args[name]=[args[name]]
args[name].push(value);
}else{ //已经是数组的
args[name].push(value);
}
}
/*在实际应用中下面的showArg和args.toString可以删掉，这里只是为了测试函数getArgs返回的内容*/
var showArg=function(x){ //转换不同数据的显示方式
if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'"; //字符串
if(x instanceof Array) return "["+x+"]" //数组
return x; //数字
}
//组装成json格式
args.toString=function(){
for(var i in args) argsStr.push(i+':'+showArg(args[i]));
return '{'+argsStr.join(',')+'}';
}
return function(){return args;} //以json格式返回获取的所有参数
})();
alert(getArgs());
alert("username:"+getArgs()["username"]);
测试示例的HTML源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="test.js?id=4&username=yemoo&id=1&uid=110"></script>
<script type="text/javascript" src="test.js?id=5&username=ajaxbbs&id=7&uid=253"></script>
<script type="text/javascript" src="test.js?id=6&username=jack&id=8&uid=258"></script>
</head>
<body>
</body>
</html>
脚本之家演示代码 http://demo.jb51.net/js/2011/jscc/
1、首先获取到当前JS文件的SRC属性，这里有一个小技巧：我们只需要获取当前页面最后一个script标记内容即可。
为什么？？因为JS是顺序解析的，当前JS脚本解析时后面的js都还没有解析到，当然就认为自己就是最后一个script了。此外，这样获取还有一个好处：我们可以多次引用同一个文件且传入不同的参数，这样可以在js文件中根据参数不同做不同处理，很巧妙把！简直就是动态语言了。
代码如下：
复制代码 代码如下:
var scripts=document.getElementsByTagName("script");
var curJS=scripts[scripts.length-1]; //curJS就是我们当前的js文件
得到这个就好办了，通过curJS.src即可获取到完整的路径内容（包括参数）。
2、下面的就是解析参数内容了，解析的过程相当简单，相信很多人都容易完成这一步。
但我们要对一个特殊情况进行处理：如果一个参数被传入了多次，则要将该参数值转换为数组存储每一个传入的值。
完整测试脚本如下：
复制代码 代码如下:
var getArgs=(function(){
var sc=document.getElementsByTagName('script');
var paramsArr=sc[sc.length-1].src.split('?')[1].split('&');
var args={},argsStr=[],param,t,name,value;
for(var i=0,len=paramsArr.length;i<len;i++){
param=paramsArr[i].split('=');
name=param[0],value=param[1];
if(typeof args[name]=="undefined"){ //参数尚不存在
args[name]=value;
}else if(typeof args[name]=="string"){ //参数已经存在则保存为数组
args[name]=[args[name]]
args[name].push(value);
}else{ //已经是数组的
args[name].push(value);
}
}
/*在实际应用中下面的showArg和args.toString可以删掉，这里只是为了测试函数getArgs返回的内容*/
var showArg=function(x){ //转换不同数据的显示方式
if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'"; //字符串
if(x instanceof Array) return "["+x+"]" //数组
return x; //数字
}
//组装成json格式
args.toString=function(){
for(var i in args) argsStr.push(i+':'+showArg(args[i]));
return '{'+argsStr.join(',')+'}';
}
return function(){return args;} //以json格式返回获取的所有参数
})();
alert(getArgs());
alert("username:"+getArgs()["username"]);
测试示例的HTML源码：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="test.js?id=4&username=yemoo&id=1&uid=110"></script>
<script type="text/javascript" src="test.js?id=5&username=ajaxbbs&id=7&uid=253"></script>
<script type="text/javascript" src="test.js?id=6&username=jack&id=8&uid=258"></script>
</head>
<body>
</body>
</html>
脚本之家演示代码 http://demo.jb51.net/js/2011/jscc/
相关文章
大家在制作网页或者小程序的时候经常用到随机数，作者整理了一个很简单的JS生成随机数的程序，一起学习下。2018-02-02
setTimeout函数是一个原生的javascript函数。setTimeout函数会在一个指定的延迟时间之后调用一个函数或执行一段指定的代码。它的应用非常广泛，例如我们希望用户在浏览器某个页面一段时间后弹出一个对话框，或者是鼠标点击某个元素后隔几秒钟在删除这个元素。2017-02-02
JavaScript语法 JSON序列化之stringify实例详解
这篇文章主要为大家介绍了JavaScript语法 JSON序列化之stringify实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了js实现指定红包顺序和金额算法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
JavaScript 嵌套函数指向this对象错误的解决方法
JavaScript对于全局函数内的this绑定为全局对象，而对于嵌套函数也采用了相同的解释。2010-03-03
这篇文章主要给大家介绍了关于echarts图表中x轴和y轴的配置指南,文中通过代码示例介绍的非常详细,对大家学习或者使用echarts具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
说实话，我是个比较喜欢怀疑权威的人，但是在有些权威的问题一直在我面前闪，闪啊闪，我就开始不怀疑他们了，因为有10000个人说这个东西是对的，我就会觉得它的确是对的吧。2010-05-05
这篇文章主要介绍了JS数组的常用10种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
JavaScript修改css样式style动态改变元素样式
修改css样式style在某些情况下还是比较实用的，可以动态改变一些样式，接下来为大家介绍下使用JavaScript是如何做到的2013-12-12
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
这篇文章主要介绍在微信浏览器Javascript无法使用window.location.reload()刷新页面的解决方法，比较实用，需要的朋友可以参考下。2016-06-06
最新评论