监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏

1.onbeforeunload：

//在页面刷新和关闭的时候触发事件，表示正要去服务器读取新的页面时调用，此时还没开始读取。
//检测浏览器刷新
window.onbeforeunload = function()
{   // return '确定需要离开页面' // 加上这个可以拦截页面关闭，return 只要有返回就可以
}

2.onunload：

则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

3.onload：

当资源已加载时被触发。

注: onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。

那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。

拦截浏览器返回：

1.当活动历史记录条目更改时，将触发popstate事件，通过popstate监听实现拦截浏览器;
2.页面载入时就使用history api插入一条历史记录，为啥要这一步呢，原因是onpopstate事件只能监听pushState插入的历史记录，而a标签跳转的链接是不受监听滴。
3.因此为了让我们能监听用户点击浏览器的回退操作or安卓的返回键，必须得加上这一步。

//页面载入时使用pushState插入一条历史记录
history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());
function popstateFn(event){var confrimFn=confirm('确定需要返回上一级页面')console.log('回退',confrimFn);if(confrimFn){//点击了确定，取消监听方法，并返回window.removeEventListener('popstate', popstateFn,true);history.back()setTimeout(()=>{window.addEventListener('popstate', popstateFn,true);},0)}else{// 点了了取消，回退时再向历史记录插入一条，以便阻止下一次点击回退history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());}
}
// 挂载方法
window.addEventListener('popstate', popstateFn,true);

监听用户退回操作，必须是history api添加的历史记录才能响应事件。意思是history.pushState或者history.replaceState添加的才能响应。超链接或者location.href跳转不受控制。

监听页面显示和隐藏：

1.通过visibilitychange 监听监听文档的是否可视化
2.同时查看浏览器可视化状态是什么，Document.visibilityState 可见性状态

Document.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：‘visible’ : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.‘hidden’ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .‘prerender’ : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
当此属性的值改变时, 会递交 visibilitychange (en-US) 事件给Document**

document.addEventListener('visibilitychange', () => {if (document.visibilityState == "visible") {alert('出现')} else {alert('隐藏')}
})

同时，window 的pagehide 和 pageshow 也可以实现监听

window.addEventListener('pagehide', () => {alert('隐藏')})
window.addEventListener('pageshow', () => {alert('显示')})

监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏相关推荐

springboot—监听容器启动事件—拦截器及注册
1.监听容器启动事件 2.拦截器
前端监听页面显示隐藏 visibilitychange
业务场景当前页面再次可见时(从其他tab页切换过来或者从其他软件切换过来),重新调用接口获取最新数据. 使用通过 document.visibilityState 判断页面隐藏还是显示. docu ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
android删除键监听,「React Native」Android返回键监听
在需要做监听的js中添加 componentWillMount() { if (Platform.OS === 'android') { BackHandler.addEventListener('h ...
自动弹窗被拦截 html,解决JS弹出新窗口被浏览器阻止的解决方案
本文转载自:http://blog.csdn.net/cntanghai/article/details/6643522 在js中通过open弹出窗口可能会被阻止,我尝试这段代码: var flag ...
内置h5 调用safari系统浏览器打开_开发教我做设计：移动端H5页面中的橡皮筋效果...
什么是橡皮筋效果(Over Scroll)? 在浏览被H5与iOS客户端混合编程的页面时,由于Safari浏览器的特性,当H5页面滑动到页面顶部.页面底部的位置时,继续下拉/上拉H5网页会出现&quo ...
【不得不看的几种js监听浏览器返回,关闭,刷新】
监听浏览器切换页面 //切换页面document.addEventListener('visibilitychange', function () { //浏览器切换事件if (document.vi ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
html js按钮事件监听,JS监听事件
对象 - JS监听事件 ¶ 作者:KK 发表日期:2016.2.21 在准备讲解后面的window对象之前,这里将话题转回来事件这里平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样 ...
[Flex]Flex编程注意之自动获取焦点、监听全局键盘事件
http://www.k-zone.cn/zblog/post/flex-air-auto-set-focus.html 这是<Flex第一步>群里面一个朋友问我的问题,特此拿出分享一下. ...

监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏

1.onbeforeunload：

监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏相关推荐

最新文章

热门文章