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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
jQuery简单实现日历的方法
May 04 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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在文件指定行中写入代码的方法
2012/05/23 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
新领导上任欢迎词
2014/01/13 职场文书
挂职自我鉴定
2014/02/26 职场文书
抽奖活动主持词
2014/03/31 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
平安建设汇报材料
2014/12/29 职场文书
护士先进个人总结
2015/02/13 职场文书
教师病假条范文
2015/08/17 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python