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实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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多个版本的分析解释
2011/07/21 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
详解react-redux插件入门
2018/04/19 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Python列表list排列组合操作示例
2018/12/18 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python如何进入交互模式
2020/07/06 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书