移动端网页返回主页功能php,移动端点击返回键，页面不刷新解决方案

在移动端项目中遇到了点击浏览器返回键，页面不刷新的问题，通过研究学习，采用了以下的解决方案。问题解决了。

(一)移动端点击返回键，页面不刷新解决方案

移动端浏览器点击返回上一级，页面不刷新的原因之一：返回上一级的页面是从往返缓存bfcache)中获取的,而浏览器保存了DOM和js的状态，再次打开时不触发onload事件，即页面不会重新加载。

可在js代码中增加以下页面强制刷新的代码：

1、判断页面是否存在“往返缓存”；

2、如果存在，重新加载当前页面。

// 点击浏览器返回按钮，404页面刷新

window.addEventListener('pageshow', function (event) {

//event.persisted属性为true时，表示当前文档是从往返缓存中获取

if (event.persisted) location.reload();

});

pageshow和onload很相似：

“pageshow”：每次浏览网页时触发，事件必须绑在window上；

“onload”：第一次浏览时触发(用于页面从浏览器缓存中获取时，不触发)；

(二)“往返缓存”

"往返缓存"(back-forward cache,简称bfcache),当用户点击前往新页面时，会把当前页面(包括页面数据、DOM、JS状态等)保存在bfcache中；当用户点击后退按钮时，会从bfcache中获取上一级的页面，加快页面的转换速度和减少网络请求时间。

bfcache的出现导致了页面不刷新的问题，如下：

在A页面点击“去完成”时跳转到B页面，完成任务之后在B页面点击回退按钮，退回到A页面。这个时候A页面的“去完成”按钮理应会变成“已完成”，但是因为A页面跳转B页面的时候，A页面的数据(DOM和js状态)存在了bfcache中，所以从B跳转到A页面时，A页面并不会刷新，按钮不会变成“已完成”。

往返缓存_图解.jpg

笔记整理记录

移动端网页返回主页功能php,移动端点击返回键，页面不刷新解决方案相关推荐

解决苹果手机点击返回键页面不刷新问题
解决苹果手机点击返回键页面不刷新问题参考文章: (1)解决苹果手机点击返回键页面不刷新问题 (2)https://www.cnblogs.com/-mrl/p/7150417.html (3)htt ...
Bilibili返回顶部功能实现
Bilibili返回顶部功能实现文章目录 Bilibili返回顶部功能实现实现原理 1. 图 2. 实现代码最近学着开发网站,学校又是实训前端,也就多练练. 一开始是看水无月打牌注意到的,挺有趣 ...
自动显示隐藏返回顶部功能
功能描述: 当通过浏览器拖动滚动条后,自动显示"返回顶部"图标,当点击"返回顶部"图标后,自动隐藏图标代码如下: 在页面头文件中引入jquery [htm ...
web端网页端分享功能的实现
思路 web端网页端分享功能的实现. 我们看微信的分享开发者文档,可以知道使用微信JS-SDK可以实现网页在微信里的分享. 微信JS-SDK说明文档也就是说在微信浏览器中打开的网页才能调用该 ...
【Android实现返回主页，禁止返回上一层等功能】
Android实现返回主页,禁止返回上一层等功能前言一.简介二.使用步骤 1.重写onBackPressed方法组织super即可实现禁止返回上一层页面: 2.两次返回,返回到的是上一个界面 3 ...
uni-app - 最详细 H5 网页接入微信登录功能，提供公众号配置与详细注释示例代码（移动端网页实现点击登录按钮后调用微信公众号授权登录功能详细讲解接入流程与详细示例代码）官方最新超级详细教程
前言关于 uni-app 项目中接入微信授权登录的文章鱼龙混杂,各种乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现微信授权登录功能,详细讲解接 ...
uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程
前言关于 uni-app 项目中接入微信支付的文章鱼龙混杂,各种 JSAPI / JS-SDK 乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现 ...
jq 移动端网页分享功能_jQuery实现移动端手机商城购物车功能
购物车数量加减右加号数量 t.val(parseInt(t.val()) + 1);//parseInt()解析input一个字符串,返回一个整数 heji();//调用后面计算的函数 }) 左减 ...
html英文手机悬浮导航,【功能升级】2017年8月第三周：移动端网页可直接调用WhatsApp软件 | 产品详情增加悬浮锚点导航...
大家好,本周我们又有一些新功能更新了,赶快来Get吧! 新增功能: 1.WhatsApp官方在最近刚刚推出了Web端接口调用,终于在移动端网页点击WhatsApp可直接调用WhatsApp软件啦,您的 ...

移动端网页返回主页功能php,移动端点击返回键，页面不刷新解决方案

移动端网页返回主页功能php,移动端点击返回键，页面不刷新解决方案相关推荐

最新文章

热门文章