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


Posted in Javascript onSeptember 13, 2020

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

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

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

var test = window.location.href;
alert(test);
返回:http://i.3water.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.3water.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中的参数值

一、正则法

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拆分法

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.3water.com/?j=js,我们想得到参数j的值,可以通过以下函数调用。

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"));

四、单个参数的获取方法

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

javascript 获取当前 URL 参数的两种方法

//返回的是字符串形式的参数,例如:class_id=3&id=2& 
function getUrlArgStr(){ 
  var q=location.search.substr(1); 
  var qs=q.split('&'); 
  var argStr=''; 
  if(qs){ 
    for(var i=0;i<qs.length;i++){ 
      argStr+=qs[i].substring(0,qs[i].indexOf('='))+'='+qs[i].substring(qs[i].indexOf('=')+1)+'&'; 
    } 
  } 
  return argStr; 
} 
//返回的是对象形式的参数 
function getUrlArgObject(){ 
  var args=new Object(); 
  var query=location.search.substring(1);//获取查询串 
  var pairs=query.split(",");//在逗号处断开 
  for(var i=0;i<pairs.length;i++){ 
    var pos=pairs[i].indexOf('=');//查找name=value 
    if(pos==-1){//如果没有找到就跳过 
      continue; 
    } 
    var argname=pairs[i].substring(0,pos);//提取name 
    var value=pairs[i].substring(pos+1);//提取value 
    args[argname]=unescape(value);//存为属性 
  } 
  return args;//返回对象 
}

另外列出一些 javascript 获取url中各个部分的功能方法:

window.location.host; //返回url 的主机部分,例如:www.xxx.com
window.location.hostname; //返回www.xxx.com
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏),例如:www.xxx.com/index.php?class_id=3&id=2
window.location.pathname; //返回/a/index.php或者/index.php
window.location.protocol; //返回url 的协议部分,例如: http:,ftp:,maito:等等。
window.location.port //url 的端口部分,如果采用默认的80端口,那么返回值并不是默认的80而是空字符

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

Javascript 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
基于javascript实现图片切换效果
Apr 17 #Javascript
非常棒的jQuery图片轮播效果
Apr 17 #Javascript
jQuery实现的倒计时效果实例小结
Apr 16 #Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 #Javascript
jQuery实现无限往下滚动效果代码
Apr 16 #Javascript
jQuery遍历json的方法分析
Apr 16 #Javascript
jquery对dom节点的操作【推荐】
Apr 15 #Javascript
You might like
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php旋转图片90度的方法
2013/11/07 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PDO::rollBack讲解
2019/01/29 PHP
js异常捕获方法介绍
2013/04/10 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python实现名片管理系统
2018/11/29 Python
Python数据可视化之画图
2019/01/15 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
python实现视频压缩功能
2020/12/18 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
查摆剖析材料范文
2014/09/30 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
布达拉宫导游词
2015/02/02 职场文书
护士医德考评自我评价
2015/03/03 职场文书
自荐信格式范文
2015/03/04 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL