H5禁止浏览器自带返回事件

需求：

h5页面有进无退

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

let XBack = {};XBack.STATE = 'x - back'
XBack.elementXBack.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()
}

H5禁止浏览器自带返回事件相关推荐

控制浏览器自带返回按钮
需求背景小程序权益详情页面跳转外部H5任务进度页面查看和领取权益. 遇到的问题浏览器自带返回按钮无法返回之前的小程序页面或需要多次按返回按钮返回之前的小程序页面. 解决方案一(放弃) 原本考虑在页 ...
vue.使用popstate监听点击浏览器自带返回按钮
我写在了app.vue,大家可以按项目需要写在需要的位置 <script> export default {name: 'App',mounted(){// 监听返回事件,点击系统返回时i ...
H5禁止手机自带键盘弹出
这个问题,确实困扰了我好久,但是今天解决了.在网上搜索答案,全都是用DIV模拟input框实现,没有一个真正解决这个问题的,现在我只需要一句代码就可以完完整整的解决这个问题. 先看下问题吧: 这个是我 ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
监听浏览器的返回事件，禁止浏览器返回
//禁止页面后退 history.pushState(null,null,document.URL); window.addEventListener('popstate',function(){// ...
uniapp 如何禁止或监听默认返回事件
页面生命周期有个 onBackPress 方法,可以监听返回事件 onBackPress(event) 返回 event ={form: backbutton | navigateBack} Andr ...
H5手机移动端调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
H5手机移动端调起浏览器自带分享功能实例(QQ.UC浏览器微博.微信分享) 注:代码需要在服务器或测试服务器上方可看到效果 HTML: <span class="viewshare w ...
H5手机页面调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
H5手机页面调起浏览器自带分享功能实例(QQ.UC浏览器微博.微信分享) HTML: <span class="viewshare wx" data-mshare=" ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...

H5禁止浏览器自带返回事件

需求：

H5禁止浏览器自带返回事件相关推荐

最新文章

热门文章