js如何准确获取当前页面url网址信息

简介:

这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法、split拆分法等,需要的朋友可以参考下

在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结。

下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=1

1、window.location.href(设置或获取整个 URL 为字符串)

var test = window.location.href;
alert(test);
返回:http://i.cnblogs.com/EditPosts.aspx?opt=1

2、window.location.protocol(设置或获取 URL 的协议部分)

var test = window.location.protocol;
alert(test);
返回:http:

3、window.location.host(设置或获取 URL 的主机部分)

var test = window.location.host;
alert(test);
返回:i.cnblogs.com

4、window.location.port(设置或获取与 URL 关联的端口号码)

var test = window.location.port;
alert(test);
返回:空字符(如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符)

5、window.location.pathname(设置或获取与 URL 的路径部分(就是文件地址))
var test = window.location.pathname;
alert(test);
返回:/EditPosts.aspx

6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)

var test = window.location.search;
alert(test);
返回:?opt=1

PS:获得查询(参数)部分,除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)

var test = window.location.hash;
alert(test);
返回:空字符(因为url中没有)

8、js获取url中的参数值

一、正则法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function  getQueryString(name) {
   var  reg =  new  RegExp( '(^|&)'  + name +  '=([^&]*)(&|$)' 'i' );
   var  r = window.location.search.substr(1).match(reg);
   if  (r !=  null ) {
     return  unescape(r[2]);
   }
   return  null ;
}
// 这样调用:
alert(GetQueryString( "参数名1" ));
  
alert(GetQueryString( "参数名2" ));
  
alert(GetQueryString( "参数名3" ));

二、split拆分法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function  GetRequest() {
   var  url = location.search;  //获取url中"?"符后的字串
   var  theRequest =  new  Object();
   if  (url.indexOf( "?" ) != -1) {
     var  str = url.substr(1);
     strs = str.split( "&" );
     for ( var  i = 0; i < strs.length; i ++) {
       theRequest[strs[i].split( "=" )[0]] = unescape(strs[i].split( "=" )[1]);
     }
   }
   return  theRequest;
}
var  Request =  new  Object();
Request = GetRequest();<br> // var id=Request["id"]; 
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];

三、指定取

比如说一个url:http://i.cnblogs.com/?j=js,我们想得到参数j的值,可以通过以下函数调用。

?
1
2
3
4
5
6
7
8
9
10
11
function  GetQueryString(name) { 
   var  reg =  new  RegExp( "(^|&)"  + name +  "=([^&]*)(&|$)" "i" ); 
   var  r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
   var  context =  ""
   if  (r !=  null
      context = r[2]; 
   reg =  null
   r =  null
   return  context ==  null  || context ==  ""  || context ==  "undefined"  ""  : context; 
}
alert(GetQueryString( "j" ));

四、单个参数的获取方法

?
1
2
3
4
5
6
7
8
function  GetRequest() {
   var  url = location.search;  //获取url中"?"符后的字串
   if  (url.indexOf( "?" ) != -1) {   //判断是否有参数
    var  str = url.substr(1);  //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
    strs = str.split( "=" );   //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
    alert(strs[1]);      //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
   }
}

以上就是本文的全部内容,希望对大家理解如何获取当前页面url网址信息有所帮助。


转载自:http://www.jb51.net/article/82519.htm

相关文章
|
14天前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
14 0
JS代码动态打印404页面源码
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的新能源汽车信息咨询服务附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的新能源汽车信息咨询服务附带文章源码部署视频讲解等
14 1
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
19 2
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影信息推荐APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影信息推荐APP附带文章源码部署视频讲解等
20 1
|
14天前
|
测试技术 UED
断网之后的页面,Autox.js是点击还是上下滑动比较好?
断网之后的页面,Autox.js是点击还是上下滑动比较好?
|
14天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
15 0
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
19 0
|
19天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的招聘信息推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的招聘信息推荐系统附带文章源码部署视频讲解等
9 0
|
19天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的数据分析岗位招聘信息与分析附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的数据分析岗位招聘信息与分析附带文章源码部署视频讲解等
8 0