需求:
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()
}