提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

自定义返回按钮点击事件（双击退出程序）

事件程序 自定义 返回 点击 按钮 退出 双击
2023-09-11 14:15:30 时间

直接上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	入口页面...
	<button type="button" id="btn1">打开test页面</button>
	
	<script>
		// 定义点击次数初始值
		var backNum = 1;
		
		document.addEventListener('plusready',function(){
			var btn = document.getElementById('btn1');
			// 添加事件监听
			btn.addEventListener('click',function(){
				// 根据id,判断页面是否存在,如果不存在则创建
				var test = plus.webview.getWebviewById('test.html');
				// create 创建新窗口
				if(!test){
					test = plus.webview.create(
						'test.html', // url
						'test.html', // id
						{}, // styles
						{name: 'hcoder', age: 18} // extra 页面传参,只有create方法可以传参,open方法无法传参
					);
				}
				// show方法展示webview
				test.show('slide-in-right');
				// 或  plus.webview.show(test,'slide-in-right');
			});

			// 使用open方法
			btn.addEventListener('click',function(){
				// 根据id,判断页面是否存在,如果不存在则打开新的
				var test = plus.webview.getWebviewById('test.html');
				if(!test){
					plus.webview.open(
						'test.html', // url
						'test.html', // id
						{}, // styles
						'slide-in-right' // aniShow 动画类型
					);
				}else{
					test.show('slide-in-right');
				}
			});
			
			// 监听设备返回键,实现定制自己的返回键(点击两次退出程序)
			plus.key.addEventListener('backbutton',function(){
				// 判读点击次数
				if(backNum < 2){
					plus.nativeUI.toast('再次按下返回键退出');
					backNum++;
					return;
				}
				// 关闭当前页
				var index = plus.webview.currentWebview();
				index.close();
			});
			
		});
	</script>
</body>
</html>

 

相关文章