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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
javascript实现点击产生随机图形
Jan 25 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实现的MySQL数据浏览器
2007/03/11 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
Python实现115网盘自动下载的方法
2014/09/30 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
python pillow库的基础使用教程
2021/01/13 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
银行求职推荐信范文
2013/11/30 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
意向书范文
2014/03/31 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
贷款收入证明格式
2015/06/24 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
pytorch实现ResNet结构的实例代码
2021/05/17 Python
vue封装数字翻牌器
2022/04/20 Vue.js