如何给JavaScript外部⽂件传递参数
⼀、利⽤全局变量
在页⾯中引⼊全局变量
<script type="text/javascript">
var p = "test";
</script>
<script type="text/javascript" src="test.js"></script>
在外部⽂件test.js中访问
/*显⽰结果*/
alert(params);
这个⽅法算是最简单的了吧。
⼆、获取并解析script元素的src
和全部变量相⽐,我们直接能像下⾯这样传⼊参数:
<script type="text/javascript" src="test.js?a=b&c=d"></script>
利⽤js的顺序执⾏机制:js⽂件的加载可以是同步或异步⽅式,但执⾏时,⼀定是按照在⽂档流中的顺序来执⾏的。怎么理解呢?因为JS是顺序解析的,当前JS 脚本解析时后⾯的js都还没有解析到,当然就认为⾃⼰就是最后⼀个script了,也就是说当某个js⽂件执⾏时,⼀定是“已加载”的js⽂件中的最后⼀个。此外,这样获取还有⼀个好处:我们可以多次引⽤同⼀个⽂件且传⼊不同的参数,这样可以在js⽂件中根据参数不同做不同处理。
var scripts = lementsbytagname('script');
var currentscript = scripts[scripts.length - 1];
得到这个就好办了,通过curJS.src即可获取到完整的路径内容(包括参数)。
下⾯的就是解析参数内容了,解析的过程相当简单,相信很多⼈都容易完成这⼀步。
javascript全局数组但我们要对⼀个特殊情况进⾏处理:如果⼀个参数被传⼊了多次,则要将该参数值转换为数组存储每⼀个传⼊的值。
完整测试脚本如下(来⾃互联⽹):
var getArgs=(function(){
var ElementsByTagName('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和String可以删掉,这⾥只是为了测试函数getArgs返回的内容*/
var showArg=function(x){ //转换不同数据的显⽰⽅式
if(typeof(x)=="string"&&!//d+/.test(x)) return "'"+x+"'"; //字符串
if(x instanceof Array) return "["+x+"]" //数组
return x; //数字
}
//组装成json格式
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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/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>
三、使⽤id和⾃定义属性传参
使⽤⽅法:
<script id="testscript" type="text/javascript" src="test.js" data="a=b&c=d"></script>
test.js获取参数⽅法⼀:
var getscript = lementbyid('testscript')
得到 getscript 的DOM对象,我们就可以利⽤上⾯的⽅法来得到值了。
test.js获取参数⽅法⼆:
var scriptargs = lementbyid('testscript').getattribute('data');
通过这个⽅法我们可以得到 data的字符串,然后使⽤“&”分割,得到值。
当然,最简单⽅法是我们可以有多个⾃定义属性,然后通过getAttribute 得到每个⾃定义属性的值,这样就很⽅便了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论