1.通过 document.hidden 与 visibilitychange 事件判断网页可见性和操作;当H5页面切换到第三方页面,或从第三方页面切换到H5页面时,会在 docment 上触发 visibilityState 事件
举个栗子:
当购买商品支付时,跳转支付宝第三方页面时,支付后返回键回到本页的时候不重载页面。触发visibilitychange事件可以获取页面离开时和回来时的状态
/**
* 支付宝-购买商品时支付跳转第三方页面,监听支付后回到本页的时候
* isHavepay_ali 判断是否发起支付宝支付
*/
createFullScreen() {
//1.支付跳转到第三方页面
this.isHavepay_ali = true;
document.addEventListener("visibilitychange", this.openFullScreen, true);
},
openFullScreen() {
if (document.hidden) {
// document.hidden 属性:boolean类型,表示页面是否处于隐藏状态
} else {
//2.此时监听到,支付完后从第三方页面回退到本页
if (this.isHavepay_ali) {
this.isHavepay_ali = false;
//必须延迟2.5秒才生效
setTimeout(() => {
//取消监听事件
document.removeEventListener("visibilitychange", this.openFullScreen, true)
//在这里就可以编写你想要的功能啦
}, 2500)
}
}
},