如何使用JavaScript停止浏览器的后退按钮?

2020/10/26 17:03 · javascript ·  · 0评论

我正在用PHP做一个在线测验应用程序。我想限制用户再次参加考试。

我尝试了以下脚本,但是它停止了我的计时器。

我该怎么办?

计时器存储在文件cdtimer.js中

<script type="text/javascript">
    window.history.forward();
    function noBack()
    {
        window.history.forward();
    }
</script>

<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

我有一个考试计时器,该计时器从MySQL值中获取考试时间。计时器相应地启动,但是当我放置用于禁用后退按钮的代码时,计时器停止。我怎么了

有许多原因导致禁用后退按钮无法真正起作用。最好的选择是警告用户:

window.onbeforeunload = function() { return "Your work will be lost."; };

该页面确实列出了您可以尝试禁用“后退”按钮的多种方法,但不能保证任何一种方法:

http://www.irt.org/script/311.htm

通常,重写Web浏览器的默认行为是一个坏主意。出于安全原因,客户端脚本没有足够的权限执行此操作。

还有一些类似的问题,

实际上不能禁用浏览器的后退按钮。但是,您可以使用自己的逻辑进行魔术操作,以防止用户向后导航,这会产生被禁用的印象。方法如下-查看以下代码段。

(function (global) {

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // Making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {
        noBackPlease();

        // Disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // Stopping the event bubbling up the DOM tree...
            e.stopPropagation();
        };
    }
})(window);

这是纯JavaScript格式,因此可以在大多数浏览器中使用。它还会禁用退格键,但是该键将在input字段和中正常工作textarea

推荐的设置:

将此代码段放在单独的脚本中,并将其包含在您想要此行为的页面上。在当前设置中,它将执行onloadDOM事件,事件是此代码的理想入口点。

工作演示!

已在以下浏览器中进行了测试和验证,

  • 铬。
  • 火狐浏览器。
  • Internet Explorer(8-11)和Edge。
  • 苹果浏览器。

我遇到了这个问题,需要一个能够在各种浏览器(包括Mobile Safari(发布时为iOS9))上正确且“很好”地工作的解决方案没有一个解决方案是正确的。我提供以下内容(在IE11,FireFox,Chrome和Safari上经过测试):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

请注意以下几点:

  • history.forward()(我的旧解决方案)在Mobile Safari上不起作用---似乎无能为力(即用户仍然可以返回)。history.pushState()确实适用于所有人。
  • 第三个参数history.pushState()url传递类似'no-back-button''pagename'似乎可以正常工作的字符串的解决方案,直到您尝试在页面上进行“刷新/重新加载”为止,此时浏览器尝试查找以该URL为URL的页面时,会生成“找不到页面”错误。(在页面上浏览器可能还会在地址栏中包含该字符串,这很丑陋。)location.href应将其用于网址。
  • 的第二个参数history.pushState()标题环顾网络,大多数地方都说它“未被使用”,这里所有的解决方案都可以通过null但是,至少在Mobile Safari中,这会将页面的Url放入用户可以访问的历史记录下拉列表中。但是,当它通常添加用于页面访问的条目时,会放入其title,这是可取的。因此,通过document.title该操作将导致相同的行为。
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script> 

对于支持HTML5历史记录API的现代浏览器,此代码将禁用后退按钮。通常情况下,按“后退”按钮可返回上一步。如果使用history.pushState(),则开始向当前页面添加额外的子步骤。它的工作方式是,如果要使用history.pushState()三次,然后开始按“后退”按钮,则前三次它将在这些子步骤中导航回去,然后第四次返回到前一页。

如果将此行为与事件上的事件侦听器结合使用popstate,则可以从根本上建立子状态的无限循环。因此,您加载页面,按下一个子状态,然后按下“后退”按钮,这会弹出一个子状态并同时按下另一个状态,因此,如果再次按下“后退”按钮,它将永远不会耗尽子状态来进行按下。如果您认为有必要禁用“后退”按钮,这将带您到那里。

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

对于限制浏览器后退事件

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

这就是我完成它的方式。奇怪地更改window.location在chrome和safari中效果不佳。碰巧location.hash不会在chrome和safari的历史记录中创建条目。因此,您将不得不使用pushstate。这对所有浏览器都适用。

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };
<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

此JavaScript不允许任何用户返回(可在Chrome,FF,IE,Edge中使用)

我觉得jordanhollinger.com上的这篇文章是最好的选择。与Razor的答案类似,但更清晰。下面的代码;完全归功于Jordan Hollinger:

前一页:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

不可退回的JavaScript页面:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

Chrome 79中,最受支持的答案都没有对我有用在75版之后,Chrome似乎更改了其相对于“后退”按钮的行为,请参见此处:

https://support.google.com/chrome/thread/8721521?hl=zh_CN

但是,在该Google线程中,Azrulmukmin Azmi在最后提供的答案确实有用。这是他的解决方案。

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

Chrome的问题在于,除非您执行浏览器操作(例如,调用history.back),否则它不会触发onpopstate事件。这就是为什么我将这些添加到脚本中的原因。

我不完全理解他写的内容,但显然history.back() / history.forward()现在需要附加才能阻止Chrome 75+中的Back。

该代码已在最新的Chrome和Firefox浏览器上进行了测试。

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>

轻松尝试:

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});

非常简单和干净的功能,可以折断后退箭头,而不会在以后干扰页面。

好处:

  • 瞬时加载并恢复原始哈希,因此用户不会因URL的明显变化而分心。
  • 用户仍然可以通过按回10次退出(这是一件好事),但并非偶然
  • 不会像其他解决方案那样受到用户的干扰 onbeforeunload
  • 它只运行一次,不会干扰进一步的哈希操作,以防您使用它来跟踪状态
  • 恢复原始哈希,因此几乎不可见。
  • 使用setInterval它不会破坏慢速浏览器,并且始终有效。
  • 纯Javascript不需要HTML5历史记录,可在任何地方使用。
  • 简洁,简单,并且可以与其他代码很好地配合。
  • 不使用unbeforeunload带模式对话框的中断用户。
  • 它只是正常工作。

注意:其他一些解决方案使用onbeforeunload不要使用onbeforeunload用于这一目的,只要用户试图关闭窗口,它会弹出一个对话框,命中backarrow等情态动词一样onbeforeunload,通常只在适当罕见的情况下,例如当他们实际上是由在屏幕上天堂的变化”不要保存它们,不是为了这个目的。

怎么运行的

  1. 在页面加载时执行
  2. 保存原始哈希(如果URL中包含哈希值)。
  3. 依次将#/ noop / {1..10}附加到哈希
  4. 恢复原始哈希

而已。没有进一步的混乱,没有后台事件监视,仅此而已。

一秒钟使用

要进行部署,只需将其添加到页面或JS中的任意位置即可:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>

这似乎对我们起作用了,即禁用了浏览器上的后退按钮,以及使您退回的退格按钮。

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });

在现代浏览器中,这似乎可行:

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)

我在React(类组件)上遇到了这个问题

我很容易地解决了:

componentDidMount() {
    window.addEventListener("popstate", e => {
        this.props.history.goForward();
    }
}

我已经习惯HashRouterreact-router-dom

   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>

您根本不能也不应这样做。但是,但这可能会有所帮助

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

适用于我的Chrome和Firefox

尝试执行以下操作以防止IE中的默认退格按钮:“退格”:

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>

我相信,完美而又完美的解决方案实际上非常简单,这是我使用了很多年了。

它基本上是将窗口的“ onbeforeunload”事件与正在进行的文档“ mouseenter” /“ mouseleave”事件一起分配,因此仅当单击超出文档范围时才触发警报(然后可以是浏览器的后退或前进按钮)

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);

我创建一个HTML页面(index.html)。我还在(脚本)文件夹/目录中创建了一个(mechanism.js)。然后,根据需要使用form,table,span和div标签将所有内容放在(index.html)中。现在,这是使后退/前进什么都不做的把戏!

首先,您只有一页的事实!其次,在需要时通过常规链接将JavaScript与span / div标签一起使用来隐藏和显示同一页面上的内容!

在'index.html'内部:

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

里面'机制.js':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

它看起来很毛茸茸,但请注意函数名称和调用,嵌入式HTML以及span标签id调用。这是为了展示如何将不同的HTML注入到同一页面的同一span标签中!后退/前进如何影响此设计?不能,因为您要隐藏对象并替换同一页面上的所有对象!

如何隐藏和显示?这里是:根据需要,在“ mechanism.js”中的内部函数中使用:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

在“ index.html”内部通过链接调用函数:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

希望我不要让您头痛。对不起,如果我这样做:-)

就我而言,这是一个购物订单。所以我要做的就是禁用按钮。当用户单击返回时,该按钮仍被禁用。当他们再单击一次,然后单击页面按钮前进时。我知道他们的订单已提交,并跳到了另一页。

在页面实际刷新的情况下(理论上)可使按钮可用;然后,我能够在页面加载中作出反应,即订单已提交,然后也进行重定向。

<script language="JavaScript">
    javascript:window.history.forward(1);
</script>

刚刚设置location.hash="Something"按下后退按钮后,哈希将从URL中删除,但该页面不会返回。

此方法有助于防止意外返回,但是出于安全目的,应设计后端以防止重新应答。

您可以放一个小的脚本,然后检查。它不允许您访问上一页。

这是用JavaScript完成的。

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

当您尝试通过浏览器返回上一页或上一页时,将触发window.onunload函数。

此处的某些解决方案不会阻止back事件的发生-它们使back事件发生(并且浏览器内存中有关页面的数据丢失),然后它们播放forward事件以尝试隐藏back事件刚刚发生。如果页面保持瞬态状态,则不成功。

我为React(当不使用React路由器时)编写了此解决方案,该解决方案基于vrfvr的答案。

除非用户确认弹出窗口,否则它将真正阻止后退按钮执行任何操作:

  const onHashChange = useCallback(() => {
    const confirm = window.confirm(
      'Warning - going back will cause you to loose unsaved data. Really go back?',
    );
    window.removeEventListener('hashchange', onHashChange);
    if (confirm) {
      setTimeout(() => {
        window.history.go(-1);
      }, 1);
    } else {
      window.location.hash = 'no-back';
      setTimeout(() => {
        window.addEventListener('hashchange', onHashChange);
      }, 1);
    }
  }, []);

  useEffect(() => {
    window.location.hash = 'no-back';
    setTimeout(() => {
      window.addEventListener('hashchange', onHashChange);
    }, 1);
    return () => {
      window.removeEventListener('hashchange', onHashChange);
    };
  }, []);
//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

另一种进行方式。我们可以添加简短的SessionStorage条件,而不仅仅是尝试避免“后退”按钮的功能性(无法正常工作)。假设我们有3个不同的页面(page1,page2,page3)。在每个页面上,我们都有单击链接以进入下一个页面,我们不希望用户能够返回上一页。在首页(page1.html)上,我们创建一个SI(sessionStorage项),其中包含一个虚拟的“ prev”代码,另一个包含“ page1”代码(其中一个SI(“ now”)):

  PAGE 1  <button onclick="goto()">PAGE 2</button>

  -------------------

  let thispage = '1' // or 123456 if prefered or make sense

  // You can replace this fixed 'thispage' value on each page with a script counting the clicks 
  // or any other way to increase its value i.e thispage++ 
  // or what you want, even counting the url.length (lol)
  
  sessionStorage.setItem('prev','0') // dummy code
  sessionStorage.setItem('now',thispage)

  // you can here make this page unreachable with page2/page3 SI same conditions

  function goto(){ 
      window.location="page2.html" 
  } 

在page2.html上,我们使用常规的NoBack脚本(如果可行),并且仅当我们来自page1时才更新SI:

  PAGE 2  <button onclick="goto()">PAGE 3</button>

  -------------------

  // if it works, let it work :-)

  history.pushState(null, null, location.href);
  history.back(); 
  history.forward();
  window.onpopstate = function () {
      history.go(1);
  };

  // else 

  let thispage = '2' // 456789
  let thisprev = sessionStorage.getItem('now') 
  if(sessionStorage.getItem('prev')==thispage) {  
      console.log('USER is back on PAGE 2')
      setTimeout(function() { goto() }, 1000); // remove log+setTimeout
  }
  if(thisprev !== thispage) { 
      if(thisprev < thispage) {
          console.log('USER is coming from PAGE 1')
          sessionStorage.setItem('prev',thisprev)
          sessionStorage.setItem('now',thispage)
      }
      else { 
          console.log('USER try to reload this page')
          setTimeout(function() { goto() }, 1000);
      }
  }

  function goto(){ 
      window.location="page3.html" 
  }

并在page3.html上:

  PAGE 3  <button onclick="goto()">BACK TO PAGE 1</button>

  -------------------

  history.pushState(null, null, location.href);
  history.back(); 
  history.forward();
  window.onpopstate = function () {
      history.go(1);
  };

  let thispage = '3' // 999999
  let thisprev = sessionStorage.getItem('now') 
  if(sessionStorage.getItem('prev')==thispage) {  
      goto()
  }
  if(thisprev !== thispage) { 
      if(thisprev < thispage) {
          sessionStorage.setItem('prev',thisprev)
          sessionStorage.setItem('now',thispage)
      }
      else { 
          goto()
      }
  }
  function goto(){ 
      window.location="page1.html" // reinit test
  } 

这样做的好处是,即使用户手动重新加载上一页(如果他有时间查看并记住该URL),它仍然可以工作。尚未在所有设备上进行测试,但在OSX上的FF + Chr + Edge Win10和FF + Chr上似乎可以正常工作。

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascripttingzhiliulanqidehoutuianniu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!