H5页面,js监听安卓手机返回按键操作,禁用返回按键操作。

使用到的技术要点:history.pushState()

原理暂不做解释,后续再做补充,可参考

popstate官方文档

1、禁用手机返回按键,引入直接可用,亲测.

	XBack = {};
 
	(function(XBack) {
		XBack.STATE = 'x - back';
		XBack.element;
 
		XBack.onPopState = function(event) {
			event.state === XBack.STATE && XBack.fire();
			XBack.record(XBack.STATE); //初始化事件时,push一下
		};
 
		XBack.record = function(state) {
			history.pushState(state, null, location.href);
		};
 
		XBack.fire = function() {
			var event = document.createEvent('Events');
			event.initEvent(XBack.STATE, false, false);
			XBack.element.dispatchEvent(event);
		};
 
		XBack.listen = function(listener) {
			XBack.element.addEventListener(XBack.STATE, listener, false);
		};
 
		XBack.init = function() {
			XBack.element = document.createElement('span');
			window.addEventListener('popstate', XBack.onPopState);
			XBack.record(XBack.STATE);
		};
 
	})(XBack); // 引入这段js文件

     //使用
	XBack.init();
	XBack.listen(function() {});

2、如果想做一些操作的话:

    //监听一下返回按钮返回路径
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, null, "#");
    }

    // 在需要监听的页面执行该方法
    pushHistory();
    window.addEventListener("popstate", function(e) {
        // 如果监听到返回,上级页面
        window.location.href='/supplyheat/a/appIndex'; // 或者其他操作。
    }, false);

3、Import

我遇到的场景只是不想让它返回上一个页面,而是上一级页面。

你可以在点击事件的时候,去执行这个方法,我还没有尝试过试过,但是应该是可的,希望对有需要的小伙伴有所帮助!

你可能感兴趣的:(js)