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 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
js实现简单页面全屏
Sep 17 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
基于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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Scala解析Json字符串的实例详解
2017/10/11 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
Python实现一个论文下载器的过程
2021/01/18 Python
css3的transition属性详解
2014/12/15 HTML / CSS
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
出国导师推荐信
2014/01/16 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
三年级学生评语大全
2014/12/26 职场文书
世界遗产的导游词
2015/02/13 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers