h5禁止返回事件

分手后的思念是犯贱 2023-01-11 09:09 173阅读 0赞

> 需求：  
> h5页面有进无退

对禁止后退方法统一封装：

let 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) { 
        console.log(state, location.href)
        /* pushState用于向history对象添加当前页面的记录，并且改变浏览器地址栏的URL; 即历史记录里加入新的url地址，浏览器地址栏也会变成新的相对URL */
        history.pushState(state, null, location.href)
    }
    
    XBack.fire = function() { 
        var event = document.createEvent('Events')
        /* initEvent参数(eventType: 事件类型, canBubble: 事件是否冒泡, cancelable: 是否可以用preventDefault()方法取消事件) */
        event.initEvent(XBack.STATE, false, false)
        /* initEvent方法将初始化 Document.createEvent() 方法创建的合成 Event 对象的 type 属性、 bubbles 属性和 cancelable 属性。 只有在新创建的 Event 对象被 Document 对象或 Element 对象的 dispatchEvent() 方法分派 之前，才能调用 Event.initEvent() 方法。*/
        XBack.element.dispatchEvent(event)
    }
    
    XBack.listen = function(listener) { 
        XBack.element.addEventListener(XBack.STATE, listener, false)
    }
    
    XBack.init = function() { 
        XBack.element = document.createElement('span')
        // 手动监听popstate
        // history路由是popstate监听路由变化
        window.addEventListener('popstate', XBack.onPopState)
        XBack.record(XBack.STATE)
    }
    
    XBack.remove = function(){ 
        window.removeEventListener('popstate', XBack.onPopState)
    }
    
    export default XBack

页面内引用:

// import 引入XBack
    mounted() { 
       XBack.init()
       XBack.listen(() => { })
    }
    
    // 可以在组件销毁是进行remove
    destroyed() { 
      XBack.remove()
    }