前端必备基础知识：window.location 详解
作者简介：
李中凯
八年多工作经验 前端负责人，
擅长JavaScript/Vue。
掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
公众号：1024译站
前端开发人员对 window.location对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。
我们以一个常见的 URL 为例，看看window.location包含哪些属性和方法。
window.location.href → 'https://www.jianshu.com/search?q=JS#comments'.origin → 'https://www.jianshu.com'.protocol → 'https:'.host → 'www.jianshu.com'.hostname → 'www.jianshu.com'.port → ''.pathname → '/search/'.search → '?q=JS'.hash → '#comments'
window.location.assign('url').replace('url').reload().toString()
window.location 属性一览表
window.location
|
含义 |
|---|---|
.origin
|
URL 基础地址，包括协议名、域名和端口号 |
.protocol
|
协议 (http: 或 https:)
|
.host
|
域名+端口号 |
.hostname
|
域名 |
.port
|
端口号 |
.pathname
|
路径(以/开头)
|
.search
|
查询字符串，以?开头
|
.hash
|
页面锚点，以#开头
|
.href
|
完整 URL |
比较容易混淆的是host和hostname这两个属性，区别是前者还包含了端口号。
修改属性值
以上属性除了origin是只读属性，其他都可以修改。修改后的效果就是跳转到相应的新地址。
window.location.protocol = 'https'.host = 'localhost:8080'.hostname = 'localhost'.port = '8080'.pathname = 'path'.search = 'q=vue' // (不需要带 ?).hash = 'target' // (不需要带 #).href = 'https://www.kaysonli.com'
如何访问 Location 对象
window.location返回 Location 类型的一个实例对象，包含当前页面的地址信息。可以通过以下几种方式访问：
window.location → Location
window.document.location → Location
document.location → Location
location → Location
这几个变量都是等价的，因为它是全局变量。但是建议避免直接用location变量，因为很容易跟其他局部变量混淆，造成不必要的麻烦。比如：
location.protocol; // 'https'function localFile() {const location = '/vue';return location.protocol;// ❌ undefined// 这里的局部变量 "location"覆盖了全局变量
}
推荐用window.location，这样一眼就可以看出用的是全局变量。
window.location 方法一览表
window.location
|
动作 |
|---|---|
.assign()
|
导航到指定 URL |
.replace()
|
导航到指定 URL并删除当前页面的访问记录 |
.reload()
|
重新加载当前页面 |
.toString()
|
返回 URL 字符串 |
.toString()和.href都是返回 URL，它们之间有区别吗？结果是一样的，性能上稍微有点差别。通过 JSPerf 上的性能测试结果可以看出，.href稍快，通过window.location拼接字符串的形式速度最慢。
性能对比
.assign() 和直接修改href是等价的，那么它们跟.replace()的区别是什么呢？
.assign() 在跳转新地址的同时会留下当前页面的访问记录，点击浏览器返回按钮会回到原来的页面，.replace()则不会保留。
.assign()执行流程：
1. 打开空白页
2. 访问 www.kaysonli.com (当前页)3. 加载新页面
前端必备基础知识：window.location 详解相关推荐
- 计算机在线问,计算机基础知识在线测试问题详解
计算机基础知识在线测试问题详解 (75页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.90 积分 实用文档题目1of100以下不属于计算机外部设备 ...
- web前端开发三个阶段和三要素，学前端必备基础知识
web前端开发三个阶段和三要素是什么?下面就跟着小编一起来看看吧! Web前端市场前景广阔,吸引了很多人涌入学习,但无论是零基础小白,亦或是想要进阶深造的程序员,前端开发三个阶段和三要素都是他们必学的 ...
- 安卓基础知识-layout布局详解。
安卓基础知识 1. 目录结构: src存放java源代码. gen存放系统自动生成的配置文件 res存放应用用到的所有资源文件,如图片,布局等等 drawable存放不同分辨率的图片 layout存放 ...
- Linux基础知识之systemd详解
0x00 Systemd 简述 1.Linux 启动流程 2.主角登场 0x01 Systemd Unit 1.配置文件 2.启动流程 3.进程树(Process tree) 4.运行级别 0x02 ...
- Linux操作系统基础知识命令参数详解
Linux操作系统 RAID分组 RAID JBOD RAID JBOD的意思是Just a Bunch Of Disks,是将多块硬盘串联起来组成一个大的存储设备,从某种意义上说这种类型不被算作RA ...
- OpenStack基础知识-virtualenv工具详解
1.virtualenv介绍 virtualenv通过创建一个单独的虚拟化python运行环境,将我们所需的依赖安装进去,不同项目之间相互不干扰,从而解决不同的项目之间依赖不同,造成的冲突问题 2.安 ...
- 大数据学习，基础知识、发展趋势详解
1.何为大数据? 大数据(big data),IT行业术语,是指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式才能具有更强的决策力.洞察发现力和流程优化能力的海量. ...
- 软件开发的基础知识—软件版本号详解
经常被不同的软件版本搞得一头雾水,alpha.beta.demo.professional.enterprise等等,这些版本信息到底都有哪些实际上的含义呢? ·测试版与演示版 α(alpha)版 此 ...
- JavaSE基础知识总结(良心详解)
Java语言是一种高级编程语言,由Sun Microsystems于1995年首次发布.以下是Java语言的几个主要特点: 跨平台性:Java程序可以在不同的操作系统上运行,如Windows.Linu ...
最新文章
- CSS面试复习（三）：预处理器、工程化方案、三大框架中的CSS
- 中兴c600olt数据配置_中兴上架Blade 20smart孝心版
- form上传文件以及跨域异步上传
- kafka入门：简介、使用场景、设计原理、主要配置及集群搭建--转载
- Windows cmd命令反斜杠问题
- 轻松了解“Web应用防火墙”
- 大促场景系统稳定性保障实践经验分享
- python编程学习做什么-什么样的人要学点python编程？请你对号入座
- flask返回数据类型
- ~~约数个数（附模板题）
- 数值 转换 成 带千位符的数值，且转成大写
- Centos6.7下安装python连接mysql环境故障解决
- Linux Semaphore
- sin的傅里叶变换公式_傅里叶变换的由来及复数下的傅里叶变换公式证明
- 工地实名制人脸识别门禁通道闸机如何安装？
- 先有史记还是先有资治通鉴？司马迁、司马光和司马懿三人什么关系？
- 计算机的ip地址和用户名和密码是什么原因,电脑的ip地址账户和密码忘记怎么办...
- python doc 转docx
- 免费的B站短链生成器，将链接转成b23.tv
- （9）javaEE---equest与response
热门文章