location 对象详解

Location 对象包含有关当前 URL 的信息。 可通过 window.location 属性来访问。

其包含如下的属性

  • hash 哈希值。设置或返回从井号 (#) 开始到 URL结束的值。可以用它来记录页面的状态。若页面存在某个链接的name的值与hash值是一样的,页面载入时,浏览器会滚动到该链接的位置。 需要注意的是,如果URL中不带#,则 hash 值为空字符串,否则,hash值为#以及到URL结束的值。
  • hostname 设置或返回当前 URL 的主机名。
  • host 设置或返回主机名和当前 URL 的端口号。
  • href 设置或返回完整的 URL。
  • pathname 设置或返回当前 URL 的路径部分。
  • port 设置或返回当前 URL 的端口号。若port的值为空字符串,其实,该网站监听的是默认的80端口。
  • protocol 设置或返回当前 URL 的协议。协议有http:,https:,file:等等
  • search 查询字符串。设置或返回从问号 (?) 开始的 URL(查询部分)。多个查询参数之间用&分隔,如?a=b&c=d

当改变location中的除了hash之外的属性的值,均会导致页面跳转。

例如,有这样一个URL http://127.0.0.1:3000/views/index.html?q=sth&sort=desc#b 对应的

  • hash 为 #b
  • hostname 为 127.0.0.1
  • host 为 127.0.0.1:3000
  • href 为 http://127.0.0.1:3000/views/index.html?q=sth#b
  • pathname 为 /views/index.html
  • port 为 3000
  • protocol 为 http:
  • search 为 ?q=sth&sort=desc

其包含如下的方法

  • reload([bForceGet]) 刷新当前页面。bForceGet为可选参数, 默认为 false,从浏览器的缓存里取当前页。true,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 。
  • replace(URL) 当前页面跳转到指定的URL。并且用该URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后退按钮永远处于失效状态,用户也就无法进行后退了。
  • assign(URL) 当前页面跳转到指定的URL。和使用location.href=URL是一样的。会产生历史记录。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学习前端 第5周 第5天

    Joel
  • 彭小六私密日更群日更活动目录生成代码

    Joel
  • ES6 写法示例

    Joel
  • URL

    URL是统一资源定位符的简称,它表示Internet上某资源的地址。通过URL我们可以访问网络上的各种资源。

    sr
  • 如何构建网站URL,使其更加百度搜索友好?

    相当于搜索引擎而言,URL对于百度蜘蛛的抓取、索引、排名显得格外重要,合理的配置URL,往往使你的SEO工作,事半功倍,相反,则是事倍功半。

    数据通20847430
  • 聊一下get和post的区别?

    image.png 网上看了些资料,看了半天,往深里想,我自己也说不清楚了。所以决定写个东西分享一下,给你们分享一下,我就会了不少,哈哈。这就是分享就是学习...

    web前端教室
  • 外部接口如何统一api地址?

    常见的做法有 1.使用if或case语句判断参数值; 优点:简单、易理解 缺点:接口多时,if或case分支太多,代码丑陋 2.动态代理 这点怎么解析参数,调用...

    全栈自学社区
  • 短URL服务的设计与实现

    作者:呼延十原文:https://juejin.im/post/5d10ecab518825795a4d380e

    黄泽杰
  • Chrome浏览器准备改变你的网址

    谷歌Chrome浏览器已经10周岁了,在这十年Chrome确实改变了人们很多浏览网页的方式,而最近Chrome团队想要从根本上改变互联网URL(网址)的显示方式...

    用户3246106
  • 爬虫课堂(十四)|URL的去重方法

    黄小怪

扫码关注云+社区

领取腾讯云代金券