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

直接上代码:

<!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>

 

posted @ 2017-05-19 17:01  每天都要进步一点点  阅读(630)  评论(0编辑  收藏  举报