回退
用户点击导航栏左上角返回按钮或者 Android 设备的物理返回键时,页面将会收到此事件(back
)。
如果在事件的处理函数中调用了 event.preventDefault()
,容器将忽略 backBehaviour
,JS 需要负责回退或做其他操作。
说明
注意: 对于 iOS 端侧滑返回,由于手势操作具有可中途撤销的特性,故无法触发 back 事件。 容器内部有保护机制,如果用户多次重复点击返回按钮依然未能退出当前页,将会触发强制退出,忽略 preventDefault。
back 接口的使用方法
// 首先屏蔽默认行为,然后调用页面跳转 API 进行手动控制
document.addEventListener('back', function(e) {
e.preventDefault();
console.log('do something...')
AlipayJSBridge.call('popWindow');
}, false);
代码示例
点击回退跳转到指定页面:
<h1>请点击左上角返回按钮</h1> <p>点击后会跳回到淘宝页面</p> <script> // 注意:如果自定义了 back,并使用了 location.href 去跳到指定的地址,需要包装一个 setTimeout 以保证不会阻塞客户端线程。 document.addEventListener('back', function(e) { e.preventDefault(); setTimeout(function() { location.href = "https://m.taobao.com" }, 10); }, false); </script>
点击回退弹出确认框:
<h1>请点击左上角返回按钮</h1> <script> document.addEventListener('back', function(e) { e.preventDefault(); AlipayJSBridge.call('confirm', { title: '亲', message: '确定要退出吗', okButton: '确定', cancelButton: '算了' }, function(e) { if (e.ok) { AlipayJSBridge.call('popWindow'); } }); }, false); </script>