window.location包含哪些属性和方法

window.location.href     → 'https://www.XXXX.com:8089/search?q=JS#comments'
               .origin   → 'https://www.XXXX.com'
               .protocol → 'https:'
               .host     → 'www.XXXX.com:8089'
               .hostname → 'www.XXXX.com'
               .port     → ''
               .pathname → '/search/'
               .search   → '?q=JS'
               .hash     → '#comments'


修改属性值
以上属性除了origin是只读属性,其他都可以修改。修改后的效果就是跳转到相应的新地址。

window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'q=vue' // (不需要带 ?)
               .hash     = 'target' // (不需要带 #)
               .href     = 'https://www.kaysonli.com'


如何访问 Location 对象
window.location返回 Location 类型的一个实例对象,包含当前页面的地址信息。可以通过以下几种方式访问

window.location          → Location
window.document.location → Location
document.location        → Location
location                 → Location
这几个变量都是等价的,因为它是全局变量。但是建议避免直接用location变量,因为很容易跟其他局部变量混淆,造成不必要的麻烦。推荐用window.location,这样一眼就可以看出用的是全局变量。


window.location.assign('url')
               .replace('url')
               .reload()
               .toString()
window.location动作

.assign()导航到指定 URL.replace()导航到指定 URL并删除当前页面的访问记录.reload()重新加载当前页面.toString()返回 URL 字符串

.toString()和.href都是返回 URL,它们之间有区别吗?结果是一样的,性能上稍微有点差别。通过 JSPerf 上的性能测试结果可以看出,.href稍快,通过window.location拼接字符串的形式速度最慢。
.assign() 和直接修改href是等价的,那么它们跟.replace()的区别是什么呢?

.assign() 在跳转新地址的同时会留下当前页面的访问记录,点击浏览器返回按钮会回到原来的页面,.replace()则不会保留。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值