window.location.href(当前URL)

结果如下:
http://www.myurl.com:8866/test?id=123&username=xxx

window.location.protocol(协议)

结果如下:
http:

window.location.host(域名 + 端口)

结果如下:
www.myurl.com:8866

window.location.hostname(域名)

结果如下:
www.myurl.com

window.location.port(端口)

结果如下:
8866

window.location.pathname(路径部分)

结果如下:
/test

window.location.search(请求的参数)

结果如下:
?id=123&username=xxx

通常由于业务需要,前端页面中的某个数据源来源,需要我们去获取URL的某个参数值。这时封装一个输入参数名获取对应参数值的函数是必不可少的,如下所示:

function getQuery(name) {
// 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr().match(reg);//substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用,但是它没有标准化
if(r != null) {
// 对参数值进行解码
return unescape(r[]);
}
return null;
} // 调用方法,注意需要传入String类型的数据,输出结果为String类型
getQuery('id'); // '123'

不过unescape解码方法已经废除了。注释:ECMAScript v3 已从标准中删除了 unescape() 函数,并反对使用它,因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

window.location.origin('?'前边的URL)

结果如下:
http://www.myurl.com:8866

链接:https://www.jianshu.com/p/c9324d237a8e

window.location对象详解的更多相关文章

  1. JS代码的window.location属性详解

    转载:http://www.5icool.org/a/201105/a564.html 如果你稍微懂一些JS代码,一般都会知道 window.location.href 这个属性.并且用该属性获取页面 ...

  2. 火狐和IE的window.event对象详解(转载)

    FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的. 但它主要检查FF方面的错误,对IE就无能为力了. 要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不 ...

  3. window.location.href详解

    在写web程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect做页面跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如: Response.Write(&quo ...

  4. window.XMLHttpRequest对象详解

    来自:http://blog.csdn.net/lccone/article/details/7743946 window.XMLHttpRequest XMLHttpRequest对象是当今所有AJ ...

  5. JavaScript基础知识之——Location 对象详解

    属性 描述 location.hash 设置或取得 URL 中的锚 location.host 设置或取得 URL 中主机(包括端口号) location.hostname 设置或取得 URL 中的主 ...

  6. Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697

    详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...

  7. ActiveXObject对象详解

    一.什么是 ActiveX 控件?         ActiveX 控件广泛用于 Internet.它们可以通过提供视频.动画内容等来增加浏览的乐趣.不过,这些程序可能出问题或者向您提供不需要的内容. ...

  8. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  9. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

随机推荐

  1. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  2. 使用ThinkPHP实现分页功能

    前几篇(上传,缩略图,验证码,自动验证表单)文章介绍的功能实现都是基于ThinkPHP框架封装好的类进行实现的,所以这次自己写一个分页类在框架中使用. 首先在根目录建一个Tools文件夹,在Tools ...

  3. 洛谷P4054 [JSOI2009]计数问题(二维树状数组)

    题意 题目链接 Sol 很傻x的题.. c才100, n, m才300,直接开100个二维树状数组就做完了.. #include<bits/stdc++.h> using namespac ...

  4. @NotNull、@NotEmpty、@NotBlank的区别

    Spring中@NotNull.@NotEmpty.@NotBlank的区别@NotNull:用于基本数据类型@NotEmpty:用于集合类@NotBlank:用于String上面

  5. SQL、HQL、JPQL、CQL的对比

    SQL:全称结构化查询语言(Structured Query Language),是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系数据库系统:同时也是数据 ...

  6. css继承属性与非继承属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  7. .net 操作MongoDB 基础

    1. 下载驱动,最好使用 NuGet 下载,直接搜索MongoDB: 2. 引用相关驱动 3. 部分测试代码,主要是针对MongoDB的GridFS 文件存储来用 using Mongo.Model; ...

  8. Linux磁盘及分区之wwid和uuid

    背景描述,在Linux系统中,如果添加了新的SCSI磁盘或者映射SAN存储LUN操作,重启操作系统之后会出现磁盘标识符(sd*)错乱的情况. 例如之前添加的SAN存储LUN的磁盘标识符为/dev/sd ...

  9. Tmux 使用教程 on Fedora 28

    Tmux 和 gun/screen 都是优秀的终端复用软件,它的关键的好处就是,保持ssh 登录连接session不中断,并且能支持分屏操作,具备丰富的命令行参数,可以进行动态布局和操作.可以看作为s ...

  10. nmcli 命令使用

    nmcli 是 NetworkManager 的控制客户端,通过 man 查看可知: NMCLI(1) General Commands Manual NMCLI(1) NAME nmcli - co ...