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()

参考资料

MDN Location

javascript刷新页面的几种方法

window.location.href和window.open的几种用法和区别

最后更新于