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 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

微信小程序开发系列四:微信小程序之控制器的初始化逻辑

这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。

14830
来自专栏Youngxj

emlog转WordPress神器

23840
来自专栏前端儿

在浏览器客户端进行爬虫开发

在Node环境下,可以用Request模块请求一个地址,得到返回信息,再用正则匹配数据,或者用Cheerio模块包装-方便定位相关的标签项

52510
来自专栏前端小叙

vue如何加入百度联盟广告

在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js ? 直接复制粘贴到自己网页中便可显示对应广告。 在vue中由于都是vue组件,不...

52480
来自专栏前端安全

前端调试入门

这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台,Firefox的firebug。这些都能帮助我们调试前端问题...

1K330
来自专栏DeveWork

WordPress 路径相关函数总结(一):站点路径相关函数

在开发WordPress 相关产品(主题、插件)的时候,常常需要通过某些函数获取路径,包括URL路径和服务器路径。比如说在主题或插件中引用js或css文件需要U...

25760
来自专栏Jackson0714

SVN上传代码

63980
来自专栏前端萌媛的成长之路

url、href和src区别

1.5K40
来自专栏V站

Speed丨如何快速给网站添加Pjax?

Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后...

27640
来自专栏用户2442861的专栏

一步步将vim改造成C/C++开发环境(IDE)

1、安装Vim和Vim基本插件 首先安装好Vim和Vim的基本插件。这些使用apt-get安装即可: lingd@ubuntu:~/arm$sudo a...

3.3K20

扫码关注云+社区

领取腾讯云代金券