前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • 页面跳转
  • 页面刷新
  • 页面回退
  • 页面替换
  • 页面回退+刷新
  • 相关问题
  • 页面回退不刷新
  • window.location 和 document.location 有什么区别?
  • 如何禁止页面回退?
  • history.go、history.back 在 safari 无效?
  • 参考资料

这有帮助吗?

  1. Research

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

参考资料

上一页如何监控前端异常?下一页Web主题切换和个性化定制方法总结

最后更新于1年前

这有帮助吗?

MDN Location
javascript刷新页面的几种方法
window.location.href和window.open的几种用法和区别