需求：点击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 监听页面是否是缓存页面的更多相关文章

  1. vue项目如何监听窗口变化，达到页面自适应？

    [自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...

  2. 【dva】如何监听异步请求是否完成(页面loading)

    方案1.你可以在model里面操作 在model里面的state里面声明一个变量state,默认是false,effect函数执行开始就将其改为true,然后等call()然后结束后又将其改为fals ...

  3. 浅谈postMessage多页面监听事件

    最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下 ...

  4. Vue路由开启keep-alive缓存页面

    mode:hash模式下: HTML部分: <template> <div id="app"> <keep-alive> <!--使用ke ...

  5. Canal 实战 | 第一篇：SpringBoot 整合 Canal + RabbitMQ 实现监听 MySQL 数据库同步更新 Redis 缓存

    一. Canal 简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费 早期阿里巴巴因为杭州和美国双机房部署,存在跨机房同 ...

  6. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  7. angularjs -- 监听angularJs列表数据是否渲染完毕

    前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...

  8. angularjs -- 路由监听

    前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...

  9. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

随机推荐

  1. Spring MVC 和 Struts2 的区别？

    1.请求拦截级别 struts2框架是类级别的拦截,每次来了请求就创建一个Action,然后调用setter getter方法把request中的数据注入 struts2实际上是通过setter ge ...

  2. 关于Spring Security的笔记

    1.web.xml配置文件 加载Spring Security,将DelegatingFilterProxy配置在DispatcherServlet之前. <filter> <fil ...

  3. poj3613Cow Relays——k边最短路(矩阵快速幂)

    题目:http://poj.org/problem?id=3613 题意就是求从起点到终点的一条恰好经过k条边的最短路: floyd+矩阵快速幂,矩阵中的第i行第j列表示从i到j的最短路,矩阵本身代表 ...

  4. bzoj5102

    $贪心$ $按左端点排序.$ $当我们钦定了最右的左端点,那么自然希望右端点尽量靠右$ $考虑之前的区间,那么我们相当于选之前的区间中第k大的右端点$ $堆维护一下就可以了,每次把新的元素放进堆,如果 ...

  5. ubuntu 禁止错误信息 report 问题弹出

    发现ubuntu只要出现点问题就会提示要不要report error, 光点cancel就点烦了. 而且今天重新安装了一台ubuntu结果开机就蹦出error, 好烦啊. 下面说个特别有效的解决办法, ...

  6. C++学习笔记1-使用数组进行vector初始化

    另外,如果是定义的时候,可以直接指定复制.比如:int s[5]={1,2,3,4,5};vector<int> v(s,s+5);就可以啦.

  7. 【Hadoop】HDFS笔记（一）：Hadoop的RPC机制

    RPC(Remote Procedure Call, 远程过程调用)主要面对两个问题: 1.对象调用方式: 2.序列/反序列化机制. Hadoop实现的RPC组件依赖于Hadoop Writable类 ...

  8. java多线程知识点收集-总

    1.线程与进程的关系 进程(Process):当一个程序进入内存开始运行时,就产生一个进程.进程是一个独立单元,它的资源由系统分配和调度. 线程(Thread):线程是进程的执行单元,线程在进程中是独 ...

  9. 【废弃】JavaScript 删除部分

    创建: 2019/02/26 添加: 2019/02/06 添加Object部分 添加: 2019/03/09 添加Function部分 毕竟自己曾经写的,彻底删得不留痕迹还是舍不得的. 但是的确已经 ...

  10. hexo添加新菜单并实现新菜单的文章归类

    1.添加收藏夹菜单,新建一个页面,命名为 favorite,命令如下: hexo new page favorite ## 然后就可以看到在source下多了一个favorite的文件夹,里面有一个i ...