夏日博客

A-A+

js获取地址栏url以及获取url参数

2016年10月16日 前端设计 暂无评论 阅读 7 views 次

本文章来给大家总结一些利用js获取地址栏url以及获取url参数函数与js中自带的一些方法，有需要的朋友可参考参考。

js原生态写法,代码如下:

  1. function getUrlParam(name)  
  2. {  
  3.     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象  
  4.     var r = window.location.search.substr(1).match(reg);  //匹配目标参数  
  5.     if (r!=null) return unescape(r[2]); return null; //返回参数值  
  6. }  

一个更全面的js写法,代码如下:

  1. // 获取地址栏的参数数组  
  2. function getUrlParams()  
  3. {  
  4.     var search = window.location.search ;   
  5.     // 写入数据字典  
  6.     var tmparray = search.substr(1,search.length).split("&");  
  7.     var paramsArray = new Array;   
  8.     if( tmparray != null)  
  9.     {  
  10.         for(var i = 0;i<tmparray.length;i++)  
  11.         {  
  12.             var reg = /[=|^==]/;    // 用=进行拆分，但不包括==  
  13.             var set1 = tmparray[i].replace(reg,'&');  
  14.             var tmpStr2 = set1.split('&');  
  15.             var array = new Array ;   
  16.             array[tmpStr2[0]] = tmpStr2[1] ;   
  17.             paramsArray.push(array);  
  18.         }  
  19.     }  
  20.     // 将参数数组进行返回  
  21.     return paramsArray ;       
  22. }  
  23. // 根据参数名称获取参数值  
  24. function getParamValue(name)  
  25. {  
  26.     var paramsArray = getUrlParams();  
  27.     if(paramsArray != null)  
  28.     {  
  29.         for(var i = 0 ; i < paramsArray.length ; i ++ )  
  30.         {  
  31.             for(var  j in paramsArray[i] )  
  32.             {  //xiariboke.net  
  33.                 if( j == name )  
  34.                 {  
  35.                     return paramsArray[i][j] ;   
  36.                 }  
  37.             }  
  38.         }  
  39.     }  
  40.     return null ;   
  41. }  

jquery插件写法,代码如下:

  1. (function($){  
  2.     $.getUrlParam = function(name)  
  3.     {  
  4.         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  
  5.         var r = window.location.search.substr(1).match(reg);  
  6.         if (r!=null) return unescape(r[2]); return null;  
  7.     }  
  8. })(jQuery);  

我们可以用javascript获得其中的各个部分

1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)

本例返回值:

2,window.location.protocol

URL 的协议部分

本例返回值:http:

3,window.location.host

URL 的主机部分

本例返回值:www.xiariboke.net

4,window.location.port

URL 的端口部分

如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符

本例返回值:""

5,window.location.pathname

URL 的路径部分(就是文件地址)

本例返回值:/fisker/post/0703/window.location.html

6,window.location.search

查询(参数)部分

除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

本例返回值:?ver=1.0&id=6

7,window.location.hash

标签：

给我留言