location

本文深入解析了location对象的特性,包括其作为window和document属性的角色,详细介绍了location对象的各种属性如href、protocol、host等,以及方法如reload、assign和replace的使用场景与区别。文章还探讨了hash在页面定位中的作用及其与服务器请求的关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

location是一个特殊的对象,它既是window对象的属性,也是document的属性。

window.location === document.location // 返回true
  • location.href
  • location.protocol
  • location.host
  • location.hostname
    • 顶级域名
      如,.com
    • 一级域名
      如,baidu.com
    • 二级域名
      如, www.baidu.com,其中 www是主机名, 又如news.baidu.combbs.baidu.comemail.baidu.com
  • location.port
  • location.pathname
  • location.search
  • location.hash
    #代表网页中的一个位置,#右边的字符就是这个位置的标志符。
    如何将元素定位到可视区,有多种方法,其基本原理都是hash。
    所以,hash是和浏览器进行对话的,和服务器没有关系。
    发送http请求时,hash不会被发送给服务器,因此改变hash不会触发网页重载。
    在这里插入图片描述

在这里插入图片描述
location.protocol,改变以上任一项都可以改变URL,从而实现页面跳转,且当前页面被保存到历史会话中,用户可通过回退按钮返回当前页面。
在这里插入图片描述

  • location.reload()
    重载当前页面,且从缓存中加载,也不一定从缓存中加载。
    如果Disable cache勾选了,将从服务器加载,见下图。
    在这里插入图片描述
  • location.reload(true)
    重载当前页面,且强制从服务器重载,但不一定从服务器重载。
    如果Disable cache未勾选,将从缓存中加载,如下图。
    在这里插入图片描述
  • location.assign()
    从当前页面跳转到指定页面。
    调用location.assign()后,当前页面被保存到历史会话中,这意味着用户可以通过点击回退按钮返回当前页面。
    在这里插入图片描述
  • location.replace()
    从当前页面跳转到指定页面。
    调用location.replace()后,当前页面不会被保存在历史会话中,因此用户无法通过点击回退按钮返回当前页面。
    在这里插入图片描述
参考文章

location.reload()
location.assign()
location.replace()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值