Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Window.location 详细介绍

Window.location 详细介绍

作者头像
Originalee
发布于 2020-05-18 07:04:43
发布于 2020-05-18 07:04:43
2K00
代码可运行
举报
文章被收录于专栏:编程之旅编程之旅
运行总次数:0
代码可运行

本文翻译自 @samanthaming 发表于 dev.to 的博文 原文地址 https://dev.to/samanthaming/window-location-cheatsheet-4edl

image

如果你需要获取网站的 URL 信息,那么 window.location 对象就是为你准备的。使用它提供的属性来获取当前页面地址的信息,或使用其方法进行某些页面的重定向或刷新。

https://www.samanthaming.com/tidbits/?filter=JS#2

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.location.origin   → 'https://www.samanthaming.com'
               .protocol → 'https:'
               .host     → 'www.samanthaming.com'
               .hostname → 'www.samanthaming.com'
               .port     → ''
               .pathname → '/tidbits/'
               .search   → '?filter=JS'
               .hash     → '#2'
               .href     → 'https://www.samanthaming.com/tidbits/?filter=JS#2'
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.location.assign('url')
               .replace('url')
               .reload()
               .toString()

window.location 属性

window.location

返回值

.origin

协议 + 主机名 + 端口号

.protocol

协议,例如(http: 或 https:)

.host

域名 + 端口

.hostname

域名

.port

端口号

.pathname

首个 / 开始的路径名称

.search

?开始的参数字符串

.hash

#后跟随的锚点或是片段标识符

href

完整网址

hostvs hostname

在上面的示例中,你会注意到 hosthostname 的返回值是一样的,那么为什么会定义两个属性名呢?这和端口号有关,让我们一起来看看。

没有端口号的 URL

https://www.samanthaming.com

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.location.host; // 'www.samanthaming.com'
window.location.hostname; // 'www.samanthaming.com'

window.location.port; // ''
带端口号的 URL

https://www.samanthaming.com:8080

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.location.host; // 'www.samanthaming.com:8080'
window.location.hostname; // 'www.samanthaming.com'

window.location.port; // '8080'

因此,host 将包含端口号,而 hostname 将只返回域名

如何更改 URL 属性

你不仅可以调用 location 的属性来检索 URL 信息,还可以使用它来设置新的属性和更改 URL 。接下来让我们一起来看看。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// START 'www.samanthaming.com'

window.location.pathname = '/tidbits'; // 设置 url 路径

// RESULT 'www.samanthaming.com/tidbits'

以下是可以更改的属性的完整列表:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// Example
window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'query string' // (不需要传入 ?)
               .hash     = 'hash' // (不需要传入 #)
               .href     = 'url'

唯一不能设置的属性是 window.location.origin

Location Object

window.location 返回一个 Location 对象。它提供有关页面当前 URL 的信息。但是你也可以通过几种不同的方法来访问 Location 对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.location          → Location
window.document.location → Location
document.location        → Location
location                 → Location

我们之所以能够做到这一点,是因为这些都是我们浏览器中的全局变量。

image

window.location vs location

这四个属性都指向同一个 Location 对象。我个人更喜欢 window.location ,实际上会避免去使用 location。主要是因为 location 读起来更像一个通用术语,有些人可能会意外地将他们的变量命名为覆盖全局变量的变量。举个例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// https://www.samanthaming.com

location.protocol; // 'https'

function localFile() {
  const location = '/sam';

  return location.protocol;
  // ❌ undefined
  //    因为局部变量 "location" 覆盖了全局变量
}

我想大多数开发人员都知道 window 是一个全局变量。所以你不太可能引起混乱。说实话,在我写这篇文章之前,我并不知道 location 是一个全局变量,因此,我的建议是更加明确的使用 window.location

以下是我的个人偏好顺序。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// ✅
1. window.location   // ?
2. document.location

// ❌
1. window.document.location //  为什么不用 #1 或者 #2 ?
2. location // 引起歧义的 ?

当然,这只是我的偏好。你是你自己代码库的专家,没有最好的方法,最好的方法永远是最适合你和你的团队的方法。

window.location 函数

window.location

.assign()

跳转到给定的 URL

.replace()

跳转到给定的 URL,并且从历史记录中删除当前页面

.reload()

重新加载当前页面

.toString()

返回 URL 字符串

window.location.toString

下面是 MDN 的定义:

This method returns the USVString of the URL. It is a read-only version of kk

换句话说,你可以这样使用它:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// https://www.samanthaming.com

window.kk; // https://www.samanthaming.com
window.location.toString(); // https://www.samanthaming.com

至于使用哪一个,我找不到更多的资料来确认哪一个更好,如果你有更好的想法,欢迎提交一个关于这个的评论。但我确实找到了一个性能的差异。

JSPerf: Location toString vs kk

关于这些速度测试,我想说明的一点是,它是特定于浏览器的。不同的浏览器和版本会呈现不同的结果。我正在使用 Chrome ,所以 href 比其他版本更快。所以我会使用 href,并且我认为它读起来比 toSting() 更清晰。很明显 href 将 提供 URL,而 toString() 看起来像是被转换成字符串的东西。

assign vs replace

这两种方法都可以帮助您重定向或导航到另一个 URL 。不同之处在于,assign 会将当前页面保存在历史记录中,因此用户可以使用“后退”按钮来导航到该页面。而用 replace 方法则不能保存它。糊涂了?没关系,我们来一起看个例子:

Assign
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1. 打开一个新的空白页
2. 访问 www.samanthaming.com (这是当前页面)

3. 在控制台中输入以下代码,载入新页面 ? `window.location.assign('https://www.w3schools.com')`
4. 点击“后退”按钮
5. 页面返回到 ? www.samanthaming.com
Replace
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1. 打开一个新的空白页
2. 访问 www.samanthaming.com (这是当前页面)

3. 在控制台中输入以下代码,载入新页面 ? `window.location.replace('https://www.w3schools.com')`
4. 点击“后退”按钮
5. 页面返回到 ? 空白页
当前页面

我只需要在定义中强调“当前页面”。它是在你调用 assignreplace 之前的页面。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1. 打开一个新的空白页
2. 访问 www.developer.mozilla.org
3. 访问 www.samanthaming.com ? 这个就是当前页面

如何进行网页重定向

现在你已经知道,我们可以通过使用 = 直接赋值来更改 window.location 的属性。类似地,我们可以访问一些方法来执行某些操作。所以关于如何重定向到另一个页面,有三种方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 直接给 href 属性赋值
window.kk = 'https://www.samanthaming.com';

// 使用 Assign
window.location.assign('https://www.samanthaming.com');

// 使用 Replace
window.location.replace('https://www.samanthaming.com');

replace vs assign vs href

这三个都是重定向的,区别在于浏览器的历史记录。href 和 assign 在这里是一样的。它会在历史记录中保存当前页面,而 replace 不会。所以如果你喜欢创建一个导航不能回到原始页面的体验,请使用 replace。

现在的问题是 assign vs href。我想这可能是个人喜好。我更喜欢 assign ,这让我感觉像是在执行一些动作。此外它还有一个额外的好处,就是更容易测试。我已经编写了很多的 Jest 测试用例,通过使用这个方法,它让 mock 变得更容易。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.location.assign = jest.fn();

myUrlUpdateFunction();

expect(window.location.assign).toBeCalledWith('http://my.url');

但是对于 href,我发现了一个性能测试,并在我的 Chrome 版本中运行的更快更快。 同样,性能测试范围包括浏览器和不同版本,现在可能会更快,但是在未来的浏览器中,这些地方可能会被调换。

总结

好了,稍微转移一下话题,我们来看看这份使用说明是如何形成的。我在谷歌搜索如何重定向到另一个页面,然后遇到了 window.location 对象。有时候我觉得开发人员就像一个记者或者是侦探——需要通过大量的挖掘和梳理多个来源来收集所有的可用信息。老实说,我被外面的材料弄得不知所措,他们都覆盖了不同的部分,但是我只想要一个单一来源。我找不到太多,所以我想我把他们都写到一张小小的总结里!

译者注

在 twitter 上看到 javaScript 方向的大 V 推荐了这篇文章,看完英文版本后,觉得整理的非常详细,完全可以给初级工程师当做参考资料。于是为了照顾很多无法看到这篇文章的人,决定翻译为中文,放在中文博客环境里,仅供大家学习。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
这份 window.location 备忘单,让你更有条理解决地址路径问题!
作者:Samantha Ming 译者:前端小智 来源:medium 点赞再看,养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞
前端小智@大迁世界
2020/07/10
8410
Location对象
Location对象是window对象的一部分,应该百分之百的前端开发用过这个对象,但几乎所有人也都是仅仅使用location.href。但是location对象上面有好几个属性和方法对开发很有帮助。
wade
2020/04/24
5450
一篇文章带你了解JavaScript window location
window是DOM的核心对象,表示浏览器的一个实例。在浏览器中,window对象有双重角色,它是通过JS访问浏览器窗口的一个接口,也是Global对象(参考百度)。
前端进阶者
2021/01/22
8680
JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
陈不成i
2021/07/20
6910
location 对象详解
Location 对象包含有关当前 URL 的信息。 可通过 window.location 属性来访问。
前端GoGoGo
2018/08/24
5440
JavaScript强化教程——Window Location
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 对象在编写时可不使用 window这个前缀。一些例子:location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协议(http:// 或 https://) Href location.href 属性返回当前页面的 URL。实例返回(当前页面的)整个 URL:http://www.w3school.com.cn/js/ ... indow Location Pathname location.pathname 属性返回 URL 的路径名。实例返回当前 URL 的路径名:/js/js_.asp Assign location.assign() 方法加载新的文档。实例加载一个新的文档:<html> <head> [removed] function newDoc() { .assign("http://www.w3school.com.cn";) } [removed] </head> <body> <input type="button" value="加载新文档"> </body> </html></p>
IMWeb前端团队
2018/01/08
5780
Window Location 的用法
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
OECOM
2020/07/01
5780
Location对象
Location对象表示其链接到的对象的位置URL,所做的修改反映在与之相关的对象上。Document和Window对象都有这样一个链接到Location,分别通过document.location和window.location访问。
WindRunnerMax
2020/12/08
6360
location对象
是最有用的BOM对象之一,提供了与当前窗口中加载的文档有关的信息,还提供一些导航功能。location是个神奇的对象,既是window的对象也是document的对象。
小小鱼儿小小林
2020/06/23
5440
window.location对象使用
Location 对象是 window 对象的一部分,可通过 window.Location 属性对其进行访问。
王小婷
2025/05/20
1690
window.location对象使用
浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Location对象的属性与方法
在学过JavaScript之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多,本文就来详细讲解一下Location对象的属性与方法吧。
@零一
2021/01/29
7760
浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Location对象的属性与方法
【Go 语言社区】JS 相关---Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。 Window Location window.location 对象在编写时可不使用 window 这个前缀。 一些例子: location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协议(http:// 或
李海彬
2018/03/20
2.1K0
JavaScript——location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL,因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
岳泽以
2022/10/26
5830
JavaScript Window - 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。浏览器对象模型 (Browser Object Model)1 Wi
尚无正式标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
JavaEdge
2018/08/02
5940
JavaScript学习笔记027-BOM0window0location
Author:Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力,都不会被生活辜负 不忘初心,方得始终 这几天找工作 遇到一件让我非常尴尬的问题 赶场似的用了三天学了vue和小程序开发 然后赶出两个实战项目 很多api都还不熟练 导致面试时问的问题 完全答不上来 而且好多不常用的原生js的方法都忘记了 问的时候一问三不知 还因为紧张导致底气不足 一慌就乱答一气 哎 凄凉啊...... <!DOCTYPE html> <!-- 文档类型:标准html文档 --> <html lang='en'> <!--
Mr. 柳上原
2018/10/10
5350
window.location对象使用
Location 对象是 window 对象的一部分,可通过 window.Location 属性对其进行访问。
王小婷
2021/03/18
6970
window.location对象使用
跳转与导航 | Electron 安全
导航我们都知道,高德地图对吧,我们搜索一个地点,它告诉我们如何到达。对于网站来说,导航是帮助用户到达用户想去的地方(网址)
意大利的猫
2024/05/11
4880
跳转与导航 | Electron 安全
理解JavaScript中的window对象
每个JavaScript环境都有一个全局对象(global object)。在全局范围内创建的任何变量实际上都是这个对象的属性,而任何函数都是它的方法。在浏览器环境中,全局对象是window对象,它代表了包含网页的浏览器窗口。
chuckQu
2022/08/19
2K0
理解JavaScript中的window对象
BOM
BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
奋飛
2019/08/15
1.4K0
15BOM编程艺术
BOM提供了独立于HTML页面内容,而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与测览器窗口之间通信等功能。
Dreamy.TZK
2020/05/15
6560
相关推荐
这份 window.location 备忘单,让你更有条理解决地址路径问题!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验