云闪付APP内嵌H5监听左上角X关闭事件_云闪付监听分享-优快云博客

本文链接：https://blog.youkuaiyun.com/poyouzhisan/article/details/102542372

本文介绍了在云闪付APP内嵌H5页面中，如何监听用户关闭页面（左上角X）并断开蓝牙连接。详细探讨了Page Visibility API，包括document.visibilityState、document.hidden属性以及visibilitychange事件的使用，以确保在ios和安卓设备上都能正确断开蓝牙链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做云闪付蓝牙对接，遇到的一个问题。

需求

用户进入云闪付APP内嵌 H5页面调用接口连上蓝牙后，可能不想支付使用，或其他原因，随手关闭左上角X关闭浏览器，这时需要监听这个动作，断开蓝牙连接，不然用户手机会一直连着蓝牙设备，别的用户无法进行连接。

在这里插入图片描述

解决方法

Page Visibility API


	var hidden,state,visibilityChange;
	 if(typeof document.webkitHidden !== "undefined"){
	    	hidden='webkitHidden';
	    	state='webkitVisibilityState';
	    	visibilityChange='webkitvisibilitychange';
	    	
	    } else if(typeof document.hidden !== "undefined") {
	    	hidden='hidden';
	    	state='visibilityState';
	    	visibilityChange='visibilitychange';
	    }else if(typeof document.mozHidden !== "undefined"){
	    	hidden='mozHidden';
	    	state='mozVisibilityState';
	    	visibilityChange='mozvisibilitychange';
	    	
	    }else if(typeof document.msHidden !== "undefined"){
	    	hidden='msHidden';
	    	state='msVisibilityState';
	    	visibilityChange='msvisibilitychange';
	    	
	    }
	// 判断浏览器的支持情况 
	 if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { 
		 //alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); 
	 } else{
		 window.document.addEventListener(visibilityChange,function() {