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 相关文章推荐
JS数组(Array)处理函数整理
Dec 07 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
javascript删除数组元素的七个方法示例
Sep 09 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中的null合并运算符
2015/12/30 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
JS表的模拟方法
2015/02/05 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python多线程分块读取文件
2019/08/29 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
python实现邮件循环自动发件功能
2020/09/11 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
后勤自我鉴定
2013/10/13 职场文书
早读课迟到检讨书
2014/09/25 职场文书
商超业务员岗位职责
2015/02/13 职场文书
护士实习自荐信
2015/03/06 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL