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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
初识Node.js
Mar 20 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 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
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python使用folium excel绘制point
2019/01/03 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
会计专业自荐信
2013/12/02 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
餐厅筹备计划书
2014/04/25 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Python中的 Set 与 dict
2022/03/13 Python