javascript 如何在JS中阻止页面卸载(导航离开)?

nimxete2  于 2023-06-28  发布在  Java
关注(0)|答案(8)|浏览(192)

有人知道如何阻止页面重新加载或导航离开吗?

jQuery(function($) {

    /* global on unload notification */
    warning = true;

    if(warning) {
        $(window).bind("unload", function() { 
            if (confirm("Do you want to leave this page") == true) {
                //they pressed OK
                alert('ok');
            } else {
                // they pressed Cancel
                alert('cancel');
                return false;
            }
        });
    }
});

我目前在一个电子商务网站上工作,显示您未来订单的页面可以使用+/-按钮更改订购的项目数量。以这种方式更改数量实际上不会更改订单本身,他们必须按下确认,因此提交一个积极的操作来更改订单。
但是,如果他们更改了数量并从页面导航离开,我想警告他们这样做,以防这是一个意外,因为如果他们导航离开或刷新页面,更改的数量将丢失。
在上面的代码中,我使用了一个全局变量,默认情况下它是false(它只在测试中为true),当一个数量被改变时,我会将这个变量更新为true,当他们确认了这些变化时,我会将它设置为false。
如果警告是真的,页面被卸载,我为他们提供一个确认框,如果他们说不,他们想留在这个页面上,我需要停止卸载它。return false不起作用,它仍然允许用户导航离开(警告仅用于调试)
有什么想法吗

7tofc5zh

7tofc5zh1#

onbeforeunload是你想要的那个;你的函数 “应该给Event对象的returnValue属性赋值一个字符串值,并返回相同的字符串”。查看MicrosoftMozilla的文档了解详细信息。
您返回的字符串将被浏览器用来向用户显示一个自定义的确认框,允许他们拒绝留在那里,如果他们选择这样做。必须这样做,以防止恶意脚本导致拒绝浏览器攻击。

gjmwrych

gjmwrych2#

这段代码按照Natalie的建议发出警告,但如果提交了页面上的表单,则禁用警告。使用jQuery。

var warning = true;
window.onbeforeunload = function() { 
  if (warning) {
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
  }
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
70gysomp

70gysomp3#

你想使用onbeforeunload事件。

9jyewag0

9jyewag04#

window.onbeforeunload = confirmExit;
function confirmExit()
{
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}
weylhg0b

weylhg0b5#

window.onbeforeunload = function() { 
  if (warning) {
    return `You have made changes on this page that you have not yet confirmed. 
    If you navigate away from this page you will lose your unsaved changes`;
  }
}

不支持Chrome、Safari和Opera

mefy6pfw

mefy6pfw6#

正如这篇评论中所说,jQuery中没有任何东西绑定到beforeunload事件。
@karim79:不,不是的。jQuery中没有任何东西绑定到beforeunload函数;“unload”绑定到“unload”事件。不信你去查资料- )- NickFitz
因此,您必须使用纯JavaScript将函数绑定到beforeunload事件。

var warning = true;
$("form").submit(function() {
  warning = false;
});
$('#exit').click(function() {
  window.location.replace('https://stacksnippets.net/js')
});
window.onbeforeunload = function() {
  if(warning) {
    return true;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<input type="submit">
</form>
balp4ylt

balp4ylt7#

试试这个

window.addEventListener('beforeunload', function (event) {
      event.preventDefault();

      event.returnValue = 'Are you sure you want to leave this page?';
    });
uqzxnwby

uqzxnwby8#

尝试使用e.preventDefault()而不是返回false。'e'将是 unload 回调的第一个参数。

相关问题