H5页面跳转和刷新
本文主要介绍前端 H5 页面的一些刷新、回退、替换、回退 + 刷新的方法。
页面跳转
a 标签
<a href="https://example.com/path.index.html">跳转</a>
禁止 a 标签跳转的方法：
href = "#"：
#是有特定意义的，#后面紧接的是一个锚占名称，默认的锚点为#top, 即页面顶部。href="###"：
###就是一个#和不存在的锚点##的组合，页面中找不到命名为##的锚点不会发生跳转，也就不会突然跳到页面顶部。###只是一种使用者习惯，可以随便找一个跳转不到的标签作为命名。### 会带来一些副作用， 比如：会改变浏览器地址栏中的 URL；再如：如果 a 标签带了
target="_blank"，会开一个新页面。href="javascript:;"：
javascript:指定要执行的 JavaScript 语句，;表示为空语句。href="javascript: void(0);"：
void是一个操作符，该操作符指定要计算一个表达式但是不返回值。直接删掉 href 属性。
location.href
一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。设置值可以跳转新网页。
// 当前页面打开 URL 页面
location.href = ''
window.location.href = ''
this.location.href = ''
self.location.href = ''
// 在父页面打开新页面
parent.location.href = ''
// 在顶层页面打开新页面
top.location.href = ''
parent.location.href 和 top.location.href 在特定情况下有差异，如，当页面嵌套多个 iframe 时，parent 指向父窗口，top 指向最顶层的窗口。
Meta 标签
Meta 标签可以控制页面自动跳转，比如，5 秒后，自动跳转。
<meta http-equiv="refresh" content="5; url=http://www.example.com">
location.assign(url)
触发窗口加载并显示指定的 URL 的内容，效果与 location.href 相当。
location.replace(url)
以给定的URL来替换当前的资源。
需要注意是：调用 replace() 方法后，当前页面不会保存到会话历史中，这样，用户点击回退按钮时，将不会再跳转到该页面。
window.navigate(url)
非标准的方法，仅 IE 浏览器支持，其他浏览器不提供该方法。
页面刷新
Meta 标签
每 5 秒自动刷新：
<meta http-equiv="refresh" content="5">
history.go(0)
history.go(delta) 方法从会话历史记录中加载特定页面。
delta 是负值表示向后移动，正值表示向前移动。如果未向该函数传参或传 0，则该函数与调用 location.reload() 具有相同的效果。
注意： history.go(0) 直接读取缓存数据，不会从服务器端获取数据。
location.reload()
location.reload() 方法用来刷新当前页面，就像刷新按钮一样。
该方法在跨域调用（执行该方法的脚本文件的域和 Location 对象所在页面的域不同）时，将会抛出 SECURITY_ERROR DOMException 异常。
location.reload() 没有参数：
Firefox 对于该方法支持一个非标准的 forceGet boolean 参数 ，当值为 true 时，将强制 Firefox 从服务器加载页面资源。但是在其他浏览器中任何参数都是无效的。
boolean 参数不是标准规范，实际上，它从未成为 location.reload() 的规范。
document.execCommand('Refresh')
当一个HTML文档切换到设计模式时，document 暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。已废弃，尽量避免使用。
其他方法
location.replace(location)
location.href = location.href
location = location
location.assign(location)
window.navigate(location)：非标准的方法，仅 IE 浏览器支持，其他浏览器不提供该方法。
页面回退
H5 退回前一个页面，或者前几个页面。
history.go(-1)、history.back()
history.go(-1)、history.back() 都是用于返回上一页，与用户点击浏览器左上角的返回按钮是一样效果。
回退到原页面，是从浏览器缓存读取，不需要重载页面资源。
document.referrer
document.referrer 返回的是一个 URI，当前页面就是从这个 URI 所代表的页面跳转或打开的。
location.href = document.referrer
页面替换
H5 跳转到一个新页面，但不需要在 History 新增记录，即，跳转出去后，点击回退不需要再回该页面。
history.replaceState(null, null, url)
location.replace(url)
replaceState() 方法修改当前会话历史记录：
history.replaceState(stateObj, title, url)
- stateObj：是一个 JavaScript 对象，它与传递给 replaceState 方法的历史记录实体相关联。
- title：大部分浏览器忽略这个参数，将来可能有用。
- url：可选。历史记录实体的URL。新的 URL 跟当前的 URL 必须是同源；否则抛出异常。
注意：如果不加 history.replaceState，部分机型，可能会导致页面无法返回上一页。
页面回退+刷新
H5 退回前一个页面，并且刷新页面。比如：A -> B 页面，B 修改了跟 A 页面相关的一些数据，回退到 A 页面时，A 必需刷新页面上的数据。
解决方案如下：
document.referrer
location.replace(document.referrer)
pageshow 事件（推荐）
// persisted：只读属性，代表一个页面是否从缓存中加载的
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
location.reload()
}
})
let isPageHide = false
window.addEventListener('pageshow', function () {
if (isPageHide) {
location.reload()
}
})
window.addEventListener('pagehide', function () {
isPageHide = true
})
注意： 即使页面刷新了，请求接口也可能有缓存。解决方法是：在 API URL中加上时间戳。如：../path1/path2?v=${new Date().getTime()}。
History对象
使用 History 对象修改当前历史记录。A -> B页面时，先替换当前历史记录点，然后再打开 B 页面。
const json = {
time: newDate().getTime()
}
history.replaceState(json, "", location.href + " &t=" + newDate().getTime())
location.href= url
popstate事件
function(){
window.addEventListener("popstate", function(e) {
location.reload()
}, false)
const state = {
title : "",
url : "#"
}
history.replaceState(state, "", "#")
}
相关问题
页面回退不刷新
A -> B 页面，再回退到 A 页面，A页面不刷新。其原因可能是：
- B 页面回退到 A 页面，移动端部分浏览器 (如iphoneX) 默认不执行更新操作。
- B 页面回退到 A 页面，执行了更新操作。但 Ajax 请求从本地缓存中读取数据，导致页面数据不更新。
- App 跳转 B 页面，新开了窗口（类似于浏览器中新开了标签页）
window.location 和 document.location 有什么区别？
document 对象是 window 对象的一部分，是浏览器的 html 文档 。
window.document === document
window 对象的 location 属性引用的是 location 对象，表示该窗口中当前显示文档的URL；document 对象的 location 属性也是引用了 location 对象。在没有内嵌 iframe 的情况下，两者是等同的：
window.location === document.location //true
location.href === window.location.href === document.location.href
在嵌入 iframe 的情况下，最外层是相同的，但在 iframe 里面的 document.location 和window.location 不同的。iframe 里面的document.location 只改变 iframe 部分。
如何禁止页面回退？
消除所有后退动作，包括 键盘、鼠标手势等产生的后退动作：
history.pushState(null, null, document.URL)
window.addEventListener('popstate', function () {
history.go(-1)
history.pushState(null, null, document.URL)
})
history.go、history.back 在 safari 无效？
history.go 加上 ?? return false 或者 event.preventDefault() ??：
history.go(-1)
return false
history.go(0) 可改用 window.location.reload()。