小程序中监听webview页面点击返回按钮

待我称王封你为后i 2023-07-25 09:51 17阅读 0赞

###### *最新更新时间：2020年04月14日15:04:24* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：小程序退出webview组件之前，在H5页面中进行部分业务逻辑开发

#### 概述 ####

*  问题描述

> 小程序中使用webview组件，加载了一个H5的URL链接，web项目采用react架构，用户在页面进行了相关的操作，当用户点击左上角原生返回按钮的时候，在react组件中的`componentWillUnmount()`方法对用户数据进行暂存，调用接口保存到后端，但实际情况前端没有发送接口请求，点击返回按钮并没有触发`componentWillUnmount()`方法

*  componentWillUnmount

> react的生命周期方法`componentWillUnmount()`执行时机，在路由入栈和出栈时触发，此时点击返回按钮并没有触发这两种场景

*  问题分析

> 当用户点击左上角原生返回按钮的时候，会执行webview组件的生命周期方法onUnload()，但对于H5页面的操作相当于关闭浏览器，关闭浏览器或者关闭浏览器标签页面不会触发`componentWillUnmount()`

#### 解决方案 ####

*  使用 onbeforeunload 事件

> onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发

*  方案一

componentWillMount(){ 
    	window.onbeforeunload = function(){ }
    }

*  方案二

<body onbeforeunload="return myFunction()"></body>
    function myFunction() { }

#### 扩展 ####

*  onunload

> 事件在用户退出页面时发生，发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)

*  onload

> 事件会在页面或图像加载完成后立即发生，通常用于 body 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

#### 参考资料 ####

*  [onbeforeunload 事件 | 菜鸟教程][onbeforeunload _ _]
 *  [window.onbeforeunload - Web API 接口参考 | MDN][window.onbeforeunload - Web API _ _ MDN]
 *  [history.pushState无刷新改变url][history.pushState_url]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[onbeforeunload _ _]: https://www.runoob.com/jsref/event-onbeforeunload.html
[window.onbeforeunload - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload
[history.pushState_url]: https://blog.csdn.net/helloxiaoliang/article/details/73850428
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460