手机返回事件监听

古城微笑少年丶 2022-05-27 10:37 200阅读 0赞

文案参考https://www.zhihu.com/question/40511430

其中遇到了苹果端无法给绑定元素添加事件的小坑，解决办法

//给事件元素添加
    cursor:pointer;
    //防止点击元素出现闪烁背景
    -webkit-tap-highlight-color:transparent;
    
    
    $(function(){ 
            pushHistory(); 
            
            window.addEventListener("popstate", function(e) { 
                alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
                // closeWindow()
                $('body').append('<div id="window-close" style="width:100vw;height:100vh;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;z-index="9999999;"><div style="background:#fff;cursor:pointer;" class="sure" style="width:50vw;margin:0 auto;">确定</div><div class="cancel" style="width:50vw;margin:0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent;">取消</div></div>')
                
            }, false); 
            $('body').on('click','#window-close .sure',function(){
                closeWindow()
            })
            $('body').on('click','#window-close .cancel',function(){
                $(this).parents('#window-close').remove();
                return false;
            })
            function closeWindow(){
                var ua = navigator.userAgent.toLowerCase(); 
                if(ua.match(/MicroMessenger/i)=="micromessenger") { 
                    
                    WeixinJSBridge.call('closeWindow'); //微信
                } else if(ua.indexOf("alipay")!=-1){ 
                    AlipayJSBridge.call('closeWebview'); //支付宝
                }else if(ua.indexOf("baidu")!=-1){ 
                    BLightApp.closeWindow(); //百度
                }else{ 
                    window.close(); //普通浏览器
                }  
            }
            function pushHistory() { 
                var state = { 
                    title: "title", 
                    url: "#"
                }; 
                window.history.pushState({page:1},null, url);
            }
        });

ok ,快去实现下吧

\#\#pushState和popstate

window.history.pushState(state,title,url)
    
    @params Object  state   用于存放当前页面数据
    @params String  title   没有太大的作用
    @params String  url     当前页面url后面想要跟着的东西
    
    //popstate只能监听自己push进去的内容如果不是自己push进去的就不会触发这个事件
    当前进时会有event.state,后退时候state是null
    window.addEventListener('popstate',event=>{
        console.log(event)
    })
    打印出的结果
    PopStateEvent {isTrusted: true, state: null, type: "popstate", target: Window, currentTarget: Window, …}
    bubbles:false
    cancelBubble:false
    cancelable:true
    composed:false
    currentTarget:Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
    defaultPrevented:false
    eventPhase:0
    isTrusted:true
    path:[Window]
    returnValue:true
    srcElement:Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
    state:null
    target:Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
    timeStamp:6672.59999999078
    type:"popstate"
    __proto__:PopStateEvent

// 返回时执行的函数
    function _listenerFun() {
        // let obj = window._popStateObj;
        pushHistory(window.location.href)
        // if(obj.alertModal ){
           
        //     return false;
        // }
        // obj.alertModal = 
        popState.cb()
    }
    
    function pushHistory(url) {
        var url = url || window.location.href
        window.history.pushState({ page: 1 }, null, url);
    }
    /**
     *     返回监控
     *     cb   Function  成功的函数
     * 
     */
    function popState(cb) {
        if (!isApp()) {
            popState.cb = cb || function(){}
            pushHistory()
            window.addEventListener('popstate', _listenerFun);
        }
    }
    function removeState() {
        popState.modal = null
        window.removeEventListener('popstate', _listenerFun);
    }