onpageshow 监听页面是否是缓存页面
需求：点击A页面跳转至B页面，在B页面点击手机物理回退键或者history.back回退时，需要在A页面判断当前页面是否是回退回来的页面，而不是新加载的。这里用到一个
onpageshow 事件。
定义和用法
onpageshow 事件在用户浏览网页时触发。
onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false
| 是否支持冒泡: | No |
|---|---|
| 是否可以取消: | No |
| 事件类型: | PageTransitionEvent |
| 支持的 HTML 标签: | <body> |
以下是几种使用方式：
1。直接在HTMl中使用，注意只能在body上进行事件注册
<body onpageshow="myFunction(event)">
<p>该实例演示了如何向 body 元素添加 "onpageshow" 事件。</p>
<h1 id="demo"></h1>
<script>
function myFunction() {
alert("页面是否从浏览器缓存中加载? " + event.persisted);
}
</script>
2.JS中通过元素获取绑定在body上
document.getElementsByTagName("BODY")[0].onpageshow = function() {myFunction()};
3.在window上注册这个方法
window.addEventListener("pageshow", myFunction);
function myFunction(event) {
alert("页面是否从浏览器缓存中加载? " + event.persisted);
}.
通过以上方法，可以满足需求，也能判断当前页面是否是缓存页面。。。event的很多属性都有点意思。。
onpageshow 监听页面是否是缓存页面的更多相关文章
- vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
- 【dva】如何监听异步请求是否完成(页面loading)
方案1.你可以在model里面操作 在model里面的state里面声明一个变量state,默认是false,effect函数执行开始就将其改为true,然后等call()然后结束后又将其改为fals ...
- 浅谈postMessage多页面监听事件
最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下 ...
- Vue路由开启keep-alive缓存页面
mode:hash模式下: HTML部分: <template> <div id="app"> <keep-alive> <!--使用ke ...
- Canal 实战 | 第一篇：SpringBoot 整合 Canal + RabbitMQ 实现监听 MySQL 数据库同步更新 Redis 缓存
一. Canal 简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费 早期阿里巴巴因为杭州和美国双机房部署,存在跨机房同 ...
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- angularjs -- 监听angularJs列表数据是否渲染完毕
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...
- angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
随机推荐
- python 快速排序 qsort
def qsort(arr, start, end): if start > end: return def partition(arr, start, end): pivot = arr[st ...
- emacs设置tab缩进
这两天使用Emacs自带的JavaScriptMode时,发现与其它编辑器下缩进不同,而且用emacs重新缩进对齐后,再用其它的编辑器打时缩进却乱掉了.分析应该是Tab缩进的问题,在.emacs中增加 ...
- BZOJ_3545_[ONTAK2010]Peaks_主席树+倍增+kruscal重构树+dfs序
BZOJ_3545_[ONTAK2010]Peaks_主席树+倍增+kruscal重构树 Description 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道 ...
- 「IOI1998」「LuoguP4342」Polygon（区间dp
P4342 [IOI1998]Polygon - 洛谷 题意翻译 题目可能有些许修改,但大意一致 多边形是一个玩家在一个有n个顶点的多边形上的游戏,如图所示,其中n＝4.每个顶点用整数标记,每个边用符 ...
- Watir 简化日常工作实例
公司的官方主页要优化搜索任务,一共有110个独立页面,开发工程师做了以下工作:1. 为所有这些页面的每个图片添加了alt:2. 为页面上的每个标题添加了面包屑:3. 为网站最重要的标题设置H1标签,而 ...
- IOS造成卡顿的主要原因
1. cellForRowAtIndexPath, 单元格视图重用, 注意尽量让所有视图重用, 只根据单元格row和section的不容更换不同的数据, 而不是每次都生成新的单元格, 这是程序奔溃的前 ...
- 注册页面Page的内置属性以及函数 路由 模块化
Page.prototype.route route字段可以获取到当前页面的路径 Page.prototype.setData() setData函数用于将数据从逻辑层发送到视图层,同时改变对应的t ...
- asp.net中FileUpload得到上传文件的完整路径
asp.net中FileUpload得到上传文件的完整路径 Response.Write("完整路径:" + Server.MapPath(FileUpload1.PostedFi ...
- vs未能正确加载XX包的解决方法
管理员 -- cmd ---(进入到vs的安装目录下.如我的是:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE)---d ...
- sql语句之查询操作
语法顺序: select distinct 字段1,字段2,字段3 from 库.表 where 条件 group by 分组条件 having 过滤 # 执行顺序的话,到这步会返回运行select语 ...