位置: IT常识 - 正文

Window.location用法(windowlocation用法)

编辑:rootadmin
Window.location用法 Window.location 详细介绍

推荐整理分享Window.location用法(windowlocation用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:window.location与location.href,window.location与location.href,windowlocation用法,window.location与location.href,windows. location,windows. location,windows. location,windowlocation用法,内容如对您有帮助,希望把文章链接给更多的朋友!

本文翻译自 @samanthaming 发表于 dev.to 的博文 原文地址 window.location Cheatsheet - DEV Community 👩‍💻👨‍💻

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

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

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'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

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

没有端口号的 URL

https://www.samanthaming.com

window.location.host; // 'www.samanthaming.com'window.location.hostname; // 'www.samanthaming.com'window.location.port; // ''

带端口号的 URL

https://www.samanthaming.com:8080

window.location.host; // 'www.samanthaming.com:8080'window.location.hostname; // 'www.samanthaming.com'window.location.port; // '8080'

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

如何更改 URL 属性

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

// START 'www.samanthaming.com'window.location.pathname = '/tidbits'; // 设置 url 路径// RESULT 'www.samanthaming.com/tidbits'

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

// Examplewindow.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 对象。

window.location → Locationwindow.document.location → Locationdocument.location → Locationlocation → Location

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

window.location vs location

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

// https://www.samanthaming.comlocation.protocol; // 'https'function localFile() { const location = '/sam'; return location.protocol; // ❌ undefined // 因为局部变量 "location" 覆盖了全局变量}Window.location用法(windowlocation用法)

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

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

// ✅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 Location.href

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

// https://www.samanthaming.comwindow.location.href; // https://www.samanthaming.comwindow.location.toString(); // https://www.samanthaming.com

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

JSPerf: Location toString vs Location href

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

assign vs replace

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

Assign

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

Replace

1. 打开一个新的空白页2. 访问 www.samanthaming.com (这是当前页面)3. 在控制台中输入以下代码,载入新页面 👉 `window.location.replace('https://www.w3schools.com')`4. 点击“后退”按钮5. 页面返回到 👉 空白页

当前页面

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

1. 打开一个新的空白页2. 访问 www.developer.mozilla.org3. 访问 www.samanthaming.com 👈 这个就是当前页面如何进行网页重定向

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

// 直接给 href 属性赋值window.location.href = 'https://www.samanthaming.com';// 使用 Assignwindow.location.assign('https://www.samanthaming.com');// 使用 Replacewindow.location.replace('https://www.samanthaming.com');replace vs assign vs href

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

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

window.location.assign = jest.fn();myUrlUpdateFunction();expect(window.location.assign).toBeCalledWith('http://my.url');

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

总结

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

本文链接地址:https://www.jiuchutong.com/zhishi/299631.html 转载请保留说明!

上一篇:【C#+JavaScript+SQL Server】实现Web端考试系统 六:后台管理模块设计(附源码和资源)

下一篇:WebSocket开发(心跳监测)功能(websocket())

  • 可供出售金融资产和长期股权投资
  • 永久性差异什么是暂时性差异
  • 核定征收可以不开免税普票吗
  • 幼儿园申报税种及税率
  • 广告公司个体户自己可以开发票
  • 有形资产负债率和有形净值负债率
  • 进项税需要转出吗
  • 软件开发里面的人天
  • 商贸企业购进商品怎么做成本
  • 建筑工程管理费包括哪些内容
  • 出纳如何做好保密工作
  • 财务报表里现金是什么
  • 社保的计提和缴纳
  • 年度亏损计提所得税吗
  • 小规模纳税人工程服务的增值税率
  • 发票所有联次都需要加盖发票章吗
  • 购买化妆品可以税前扣除吗
  • 没有缴纳契税
  • 自产产品用于在建工程按成本价还是销售价
  • 房地产开发公司取名
  • 税务机关核定征收契税
  • 广告费发票收到但是不抵扣怎么做账?
  • 计提房租的原始凭证包括
  • 职工的经济补偿金是优先债权吗
  • 玩游戏时切换窗口怎么弄
  • 红字专用发票信息表
  • 长期待摊费用转入成本分录
  • 什么是董事会费
  • 挂靠建筑公司没有票据怎么做账?
  • 股权投资取得的收入计入什么科目
  • 集团内无偿借贷合法吗
  • vue怎么让按键启用和禁用
  • 计算完工产品成本和在产品成本的方法有哪些
  • Win11 Build 25330 预览版今日更新: 优化 Surface Dial 设置页面
  • 员工买材料报销分录
  • 资产减值损失属于营业外支出吗
  • 盘盈材料会计分录
  • 一般纳税人差额纳税
  • 小规模销项税分录
  • 投资性房地产的后续计量
  • sqlserver判断查询结果是否为空
  • 现金流量表为负数的几种原因
  • 每月工资不一样怎么算误工费呢
  • 信用减值损失和公允价值变动的区别
  • 来料加工账务处理流程
  • 外资企业可以融资吗
  • 二手车置换新车需要什么手续
  • 还借款收据怎么写
  • 先取得发票后支付怎么办
  • 认缴制下实收资本可以减少吗
  • 新办企业在建期间账务处理
  • 销售成本的结转
  • 外经证先开票还是异地预缴税率
  • 增值税进项税加计抵减
  • 为什么要提前计划
  • 客户要扣货款太多怎么处理
  • 公司购买的办公楼怎么交房产税
  • 主营业务成本为什么借增贷减
  • 自产自销的茶叶公司怎么做账
  • 主键自增长的数据如何导入
  • sql数据分类
  • 禁用windows键快捷键
  • ubuntu包管理命令
  • xp系统怎么取消用户登录
  • winlogon是什么意思
  • win10动态磁贴照片如何删除
  • 启动游戏出现dmp的文件
  • windows8 defender
  • linux用yum
  • 如何解决android代码红线
  • python2.7.11
  • bat文件命令大全
  • js中的函数怎么使用
  • 命令行执行bat文件
  • 安卓手机命令代码
  • jQuery soColorPacker 网页拾色器
  • javascript含义
  • 有哪些推荐阅读的书
  • 查税务在哪里查
  • 2010年末实现净利润390万,宣告发放现金股利40万,在计算本年未分配利润时,是否要减掉这40万?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设