UzumakiItachi
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

UzumakiItachi

起风了,唯有努力生存。
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • WebPack

  • 浏览器相关

  • 工程化相关

  • 工作中遇到的问题以及解决方案

    • 解决浏览器返回页面不刷新的问题
      • 前言
    • 前端如何下载文件流
    • uniapp APP端实现更新最新安装包
    • GitHub Actions Process completed with exit code 128 的解决方案
    • 保留文字输入的空格和换行
    • 缩放适配大屏页
    • 一次性加载n多张图片的性能优化方案
    • NOT-Cool 低代码页面架构思路
    • h5下载vcard快捷保存联系人信息
    • 结合elementui实现的动态主题
    • 解决monorepo场景下子包作为依赖项在开发和生产暴露文件的问题
    • 给npm配置github令牌
    • 移动端电子印章解决方案
    • 小程序canvas绘制海报中遇到的一些坑
    • 超详细的虚拟列表实现过程
    • 小程序实现一个事件中心
    • 请求超时后如何优雅的重新请求
    • 超详细的大文件上传实现方案
    • 仿抖音短视频组件实现方案
    • swiper渲染大量数据的优化方案
    • 前端检测更新,自动刷新网页
  • Git

  • Vite

  • 一些小工具

  • 算法

  • 服务器

  • HTTP

  • 技术
  • 工作中遇到的问题以及解决方案
hanhanbuku
2023-03-03
目录

解决浏览器返回页面不刷新的问题

# 前言

此前遇到了h5网页在ios设备上跳转不会刷新的问题,总结了以下几种解决办法

在ios上,返回上一页ios内核会直接从缓存中拿到上一个页面,而不会重新请求服务器,这也就意味着,整个页面拿出来后是静止的状态,无论是html css还是js都是处于一个暂停的状态,某些情况下这并不是我们理想的状态,有时候可能某个页面或者网页需要载入后就发起请求获取最新的数据,这个时候在ios上就会出现问题。 解决办法有如下几种

  • 1.添加meat标签设置no-cache
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
1
2
3

附:html页面中meta的作用 meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的

与中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:

name 属性

1、

用以说明生成工具(如Microsoft FrontPage 4.0)等;

2、

向搜索引擎说明你的网页的关键词;

3、

告诉搜索引擎你的站点的主要内容;

4、

告诉搜索引擎你的站点的制作的作者;

5、

其中的属性说明如下:

设定为all:文件将被检索,且页面上的链接可以被查询;

设定为none:文件将不被检索,且页面上的链接不可以被查询;

设定为index:文件将被检索;

设定为follow:页面上的链接可以被查询;

设定为noindex:文件将不被检索,但页面上的链接可以被查询;

设定为nofollow:文件将不被检索,页面上的链接可以被查询。

http-equiv属性

1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">和

用以说明主页制作所使用的文字以及语言;

又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;

2、

定时让网页在指定的时间n内,跳转到页面http://yourlink;

3、

可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;

4、

是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;

5、

cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

6、

网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的;

7、

强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;

8、

和设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。

  • 2.pageShow事件
window.addEventListener('pageshow', () => {
  if (e.persisted ) {
    window.location.reload()
  }
})
1
2
3
4
5

为了查看页面是直接从服务器上载入还是从缓存中读取,可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false,所以可以通过这个值来决定是否重载网页

编辑 (opens new window)
上次更新: 2023/03/08, 09:35:38
实现一个可自定义模板内容的脚手架
前端如何下载文件流

← 实现一个可自定义模板内容的脚手架 前端如何下载文件流→

最近更新
01
小程序实现全局状态管理
07-09
02
前端检测更新,自动刷新网页
06-09
03
swiper渲染大量数据的优化方案
06-06
更多文章>
Theme by Vdoing | Copyright © 2023-2025 UzumakiItachi | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式