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
    评论
### 回答1: `window.location.assign` 和 `window.location.href` 都可以用来改变浏览器中当前页面的 URL。 但是它们之间有一些区别: - `window.location.assign` 会创建新的历史记录条目,而 `window.location.href` 则不会。这意味着,使用 `window.location.assign` 改变页面 URL 后,用户可以使用浏览器的后退按钮返回到之前的页面。而使用 `window.location.href` 改变页面 URL 后,用户就无法使用后退按钮返回到之前的页面了。 - `window.location.assign` 方法可以接受一个字符串参数,表示要加载的新页面的 URL。而 `window.location.href` 属性则是一个只读属性,表示当前页面的 URL。所以,如果要使用 `window.location.href` 改变页面 URL,必须显式地赋值给它,例如:`window.location.href = 'http://example.com'`。 总结一下,`window.location.assign` 可以用来加载新的页面,并且会在浏览器的历史记录中留下痕迹,而 `window.location.href` 则是一个只读属性,表示当前页面的 URL。 ### 回答2: window.location.assign和window.location.href都是用于改变浏览器的当前URL地址的属性window.location.assign用于让浏览器加载一个新的URL,并替换当前页面的历史记录。它会导致浏览器向新的URL发出GET请求,并将新的URL添加到浏览器的历史记录中。这意味着用户可以通过浏览器的后退按钮返回到之前的页面。 而window.location.href是一个包含当前页面URL的字符串。当我们对window.location.href赋值一个新的URL时,浏览器会加载新的URL并替换当前页面的内容。和window.location.assign一样,这也会导致浏览器向新的URL发出GET请求,并将新的URL添加到浏览器的历史记录中。但是,相比于assign,href更像是一个只读属性,它只是返回当前页面的URL,并且赋值新的URL不会有实际的效果。 总结来说,window.location.assign可以用于导航到一个新的URL并替换当前页面的历史记录,而window.location.href只是一个返回当前页面URL的属性。 ### 回答3: window.location.assign和window.location.href都是用于在浏览器中导航到另一个URL的方法,但它们有一些细微的区别。 window.location.assign是一个函数,它接受一个URL作为参数,并将浏览器导航到该URL。它通过替换当前浏览历史记录来完成导航。这意味着用户无法通过点击“后退”按钮返回到之前的页面,而是会直接返回到之前的历史记录中的页面。例如,如果当前页面是A,使用window.location.assign('B')将导航到B,并将A从浏览历史中删除。 相比之下,window.location.href是一个属性,它包含当前页面的URL。通过修改这个属性的值,可以将浏览器导航到新的URL。使用window.location.href进行导航时,浏览器将创建一个新的浏览历史记录条目,并将其添加到历史记录中。这意味着用户可以通过点击“后退”按钮返回到之前的页面。例如,如果当前页面是A,使用window.location.href = 'B'将导航到B,并将A保留在浏览历史中。 综上所述,window.location.assign将只创建一个历史记录条目,而window.location.href将创建一个新的历史记录条目,并保留原始页面的历史记录。因此,根据具体的导航需求,我们可以选择使用window.location.assign或window.location.href。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值