位置: 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())

  • 政府补助是否可以抵扣税
  • 应交税费转营业外支出
  • 报税以及注销公司的注意事项?
  • 营业执照副本上的二维码扫描不出来
  • 汇算清缴要退税怎么做凭证呢
  • 小规模未达起征点的增值税怎么做账
  • 建筑公司购入的水泥等材料如果是做成本的怎么做分录
  • 借款当月算利息吗
  • 分公司一定要汇总申报吗
  • 其他综合收益转入投资收益
  • 红字发票认证
  • 怎么强调各个分公司之间无直接联系
  • 发票印不上字还能用吗?
  • 营业税金及附加包括增值税吗
  • 小微企业的增值税怎么算
  • 营改增建筑安装服务发票要求
  • 银行承兑汇票怎么取钱
  • 银行会计错账冲正方法
  • 建设单位对施工单位的管理要求
  • 服务类收入
  • 企业发生的间接生产费用应
  • 补交以前年度房产税如何记账
  • 仓库的数量为负数怎么办
  • 小规模纳税人免征增值税怎么记账
  • 进项税额忘了抵扣
  • 商超联营扣点
  • 付款信息和开票信息区别
  • w10系统怎么打印文件
  • 路由器管家怎么登录
  • php7.3
  • 房地产佣金手续费财务处理
  • 来料加工怎么核算成本
  • 逾期包装物押金收入计入什么科目
  • 定额征收的个体户怎么做账
  • php文件缓存方法有哪些
  • 申请高新技术企业收入要多少
  • 劳务公司成本核算方法选择什么
  • 财务费用的增加记在哪一方
  • 包装物押金会计科目
  • 长期股权投资的账面价值怎么计算
  • java删除类
  • python3 tcp
  • 非正常户是黑名单吗
  • 员工个人所得税申报方式选哪个
  • 发票生活服务费填什么报销内容
  • 小规模纳税人报税
  • 小规模纳税人专票税率是多少
  • 设备维修会计分录如何写
  • 股权激励费用怎么做账
  • 私车公用发票去哪个税务局开
  • 企业代扣代缴个税
  • 承兑汇票收据开什么发票
  • 信用卡逾期滞纳金怎么收取
  • 损益类科目借贷怎么记
  • 费用报销单如何粘贴票据
  • 暂领款是什么意思
  • 销项税小于进项税是亏本吗
  • mysql 厂家
  • windows安装在何处
  • 如何设置linux
  • CentOS安装配置adb环境
  • win8有几种版本
  • 出现闪退该怎么办
  • 如何将windows 7升级到windows 10
  • dotnetfx35
  • centos 安装chia
  • win7 win8 win8.1
  • win7任务管理器怎么调回原来样子
  • win7开机自动弹出注册表编辑器怎么办
  • linux中病毒了怎么处理
  • Android Eclipse 项目报错,但没有显示具体错的代码位置
  • 安卓新创手势
  • 对于javascript理解
  • [置顶]游戏名 TentacleLocker
  • virtualbox no bootable medium
  • JavaScript中setUTCMilliseconds()方法的使用详解
  • android 加载更多
  • 合格的税务人
  • 国家税收返还政策有哪些
  • 地方文化包括哪几种
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设