禁止浏览器后退

最近搞Android项目的时候,遇到一个比较蛋疼的需求,需要从Client App调用系统浏览器打开一个页面,进行杂七杂八的一些交互之后,返回到App。如何打开浏览器和如何返回App这里就不说了,有兴趣的童鞋可私下交流。
之所以说这个需求蛋疼,是因为Android有个物理返回键啊……返回键啊……键啊……啊……
用户按下返回键后,预期应该跟点击页面上的返回键一样——返回App。然而这个返回键的被按下的时候网页完全不知道啊(onbeforeunload不算),找不到直接的办法去监听,愁死我们这全苦逼程序员鸟~
虽然啊不能直接监听,曲线救国的办法,还是有滴。
经过艰苦卓绝的寻找,发现使用HTML5的History可以稍微模拟到返回键的按下事件。原理如下:
  • 页面加载完成时,调用history.pushState写入一个指定状态STATE,并监听window.onpopstate;
  • 当onpopstate被触发时,检查event.state是否等于STATE,如果相等,表示页面发生了后退(按下返回键或者浏览器的后退按钮),则把这次行为当作是返回键被按下了(把点击浏览器的后退按钮也误算进来了,不过没啥好法子了呀)。
嗯,为了方便调用,把这个逻辑稍微封装了下,代码见这里(https://github.com/iazrael/xback),使用方法如下:

JavaScript
[mw_shl_code=xhtml,true]XBack.listen(function(){
    alert('oh! you press the back button');
});

XBack.listen(function(){
    alert('ah, press press press');
});[/mw_shl_code]
不过这个方法有些缺陷:
  • 如果项目本身使用了pushState,则历史记录会有瑕疵(多了一个历史);
  • 浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。
But anyway,对于结构和逻辑比较简单的跳转页来说(就是为了返回App用的),这个方法还是蛮实用的,对不对?嘻嘻~


xback源码:
/**
 * 使用 HTML5 的 History 新 API pushState 来曲线监听 Android 设备的返回按钮
 * @author azrael  
 * @date 2013/02/04
 * @version 1.0
 * @example
 * XBack.listen(function(){
		alert('oh! you press the back button');
	});
 */
;!function(pkg, undefined){
	var STATE = 'x-back';
	var element;

	var onPopState = function(event){
		event.state === STATE && fire();
	}

	var record = function(state){
		history.pushState(state, null, location.href);
	}

	var fire = function(){
		var event = document.createEvent('Events');
		event.initEvent(STATE, false, false);
		element.dispatchEvent(event);
	}

	var listen = function(listener){
		element.addEventListener(STATE, listener, false);
	}

	!function(){
		element = document.createElement('span');
		window.addEventListener('popstate', onPopState);
		this.listen = listen;
		record(STATE);
	}.call(window[pkg] = window[pkg] || {});

}('XBack');



发布了210 篇原创文章 · 获赞 288 · 访问量 286万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览