防止/禁止页面后退

import ua from ‘./devices‘ // 判断环境用的

function removeHistory () {
  if (ua.isApp()) {
    // 防止页面后退
    history.pushState(null, null, document.URL)
    window.addEventListener(‘popstate‘, function () {
        history.pushState(null, null, document.URL)
    })
  }
}

export default removeHistory()
原理就是后退的时候,调用popsstate
之后通过history.pushState方法调地址栏当前地址
所以每次后退都是调用当前页面

原文地址:https://www.cnblogs.com/Model-Zachary/p/11532682.html

时间: 2024-11-04 00:07:54

防止/禁止页面后退的相关文章

PHP header( ) 禁止页面后退

header("Cache-control:no-cache,no-store,must-revalidate"); header("Pragma:no-cache"); header("Expires:0"); header('Location:http://www.23zs.com');

js禁止浏览器页面后退功能

js禁止浏览器页面后退功能: <script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);

自动设置iframe高度和禁止backspace后退js

function iFrameHeight(iframeId) {        var ifm = document.getElementById(iframeId);        var subWeb = document.frames ? document.frames[iframeId].document                : ifm.contentDocument;        if (ifm != null && subWeb != null) {      

防止页面后退(使浏览器后退按钮失效)

防止页面后退(使浏览器后退按钮失效) 原理:用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后退按钮永远失效. 注:history.go和history.back(包括用户按浏览器历史前进后退按钮)触发, 页面由于使用pushState修改了history),会触发popstate事件.     [代码如下]       注:直接放在不想后退跳转的页面即可! 方法一:       <script type="text/javascript">     

关于禁止页面滚动的实践(禁止滚轮事件)

禁止网页页面滚动只需要给document添加onmousewheel事件,然后在事件绑定函数当中设置e.preventDefault()就可以了,没错,就是芥末简单. 可是问题又来了,首先,onmousewheel是什么事件呢?它又有什么兼容性上的问题呢? 带着以上的两个问题,我通过查阅资料并且通过实践,得到了一下的认识. 1.onmousewheel是页面滚动事件,与onscroll不同的是,一般我们是通过onscroll来获取页面的滚动高度,然后添加相应的高度. 而onmousewheel,

javascript使用history api防止|阻止页面后退

奇葩需求啥时候都会有,最近有个需求是不允许浏览器回退,但是所有页面都是超链接跳转,于是乎脑壳没转弯就回答了做不到,结果尼玛被打脸了,这打脸的声音太响,终于静下心来看了下history api. 先上代码: // 防止页面后退 // 页面载入时使用pushState插入一条历史记录 history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random()); console.

禁止页面内按F5键进行刷新(扩展知识:禁止复制信息内容)

禁止页面内按F5键进行刷新: 1 //禁止页面内按F5键进行刷新 2 function f_DisableF5Refresh(event) { 3 var e = event || window.event; 4 var keyCode = e.keyCode || e.which; 5 if(keyCode == 116) { 6 if(e.preventDefault) { //非IE 7 e.preventDefault(); 8 } else { //IE 9 e.keyCode = 0

H5禁止页面滑动/滚动

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否 禁止页面滚动 有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个. 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效. 但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动. 别着急 往下看 2,在 1 的基础上 添加 js功能 var move

禁止页面缩放功能

在手机浏览器浏览页面时,有时要禁止页面中的组件缩放,因为如果不阻止缩放的话,体验效果不好. 而实现禁止页面缩放,只需要在head里面加入下面一行即可. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 下面这行我也见过人用,但是效果不如上一行: <meta id="viewport