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. HTML标签参考(一)

    hi,小哥哥小姐姐们,我们今天要说的是前端的入门,却也是十分重要的意识的培养哦! • html中的标签数量是很多的,据人统计大概有300个左右,并且每年都会以20-30个的速度增加着,但是这么多的标签 ...

  2. python常用模块-01

    1. 简单了解模块 写的每一个py文件都是一个模块. 还有一些我们一直在使用的模块 buildins 内置模块. print, input random 主要是和随机相关的内容 random()    ...

  3. Express 框架

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.使用 Express 可以快速地搭建一个完整功能的网站 ...

  4. 各类无次数限制的免费API接口整理

    各类无次数限制的免费API接口整理,主要是聚合数据上和API Store上的一些,还有一些其他的. 聚合数据提供30大类,160种以上基础数据API服务,国内最大的基础数据API服务,下面就罗列一些免 ...

  5. VC工程从Win32环境往Win64环境迁移的经验总结

    作者:朱金灿 来源:http://blog.csdn.net/clever101 首先需要安装Win64的开发环境,具体参考: VS 2008的64位编译环境的安装和使用 其次在工程属性设置中作如下修 ...

  6. OpenCV多版本管理

    OpenCV在Ubuntu下经常会安装多个版本,比如默认版本,自己安装的,ros安装的等等.有时候需要给程序指定某个OpenCV版本,网上有一些方法,但还是会遇到很多问题. 这里提供一种选择,即指定O ...

  7. mvp在flutter中的应用

    mvp模式的优点mvp模式将视图.业务逻辑.数据模型隔离,使用mvp模式,能使复杂的业务逻辑变得更加清晰,使代码更具有灵活性和扩展性,正是这些优点,使mvp模式广泛应用于原生开发中. flutter使 ...

  8. Java Web工程搭建方法

    搭建一个简单的Web工程主要是以下几步: 一.下载所需工具 ①java   ②eclipse  ③tomcat 注意:java与eclipse版本不匹配(32位或者64位),会导致eclipse启动时 ...

  9. 关于Java单例模式中懒汉式和饿汉式的两种类创建方法

    一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. 单例模式只能有一个实例. 2. 单例类必须创建 ...

  10. springcloud 入门 2 (Enreka的服务和注册)

    spring cloud eureka: eureka 用以服务发现.服务注册,比较流行的有consul(后面再介绍) eureka介绍: eureka为netflix开源软件,分为三个部分: eur ...