如何停止用JS卸载(导航)页面?

Does anyone know how to stop a page from reloading or navigating away?

有没有人知道如何停止页面重载或导航?

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;
            }
        });
    }
});

I am working on an e-commerce site at the moment, the page that displays your future orders has the ability to alter the quantities of items ordered using +/- buttons. Changing the quantities this way this doesn't actually change the order itself, they have to press confirm and therefore committing a positive action to change the order.

我目前正在一个电子商务网站工作，显示您未来订单的页面可以使用+/-按钮来改变订单的数量。以这种方式改变量实际上并没有改变订单本身，他们必须按下confirm，因此采取积极行动来改变订单。

However if they have changed the quantities and navigate away from the page I would like to warn them they are doing so in case this is an accident, as the changed quantities will be lost if they navigate away or refresh the page.

但是，如果他们改变了数量，并离开页面，我想提醒他们，他们这样做是为了防止发生意外，因为如果他们离开或刷新页面，所改变的数量将会丢失。

In the code above I am using a global variable which will be false by default (its only true for testing), when a quantity is changed I will update this variable to be true, and when they confirm the changes I will set it to false.

在上面的代码中，我使用的是一个全局变量，它默认为false(它只适用于测试)，当一个数量被更改时，我将更新这个变量为true，当它们确认更改时，我将把它设置为false。

If warning is true and the page is unloaded, I offer them a confirmation box, if they say no they would like to stay on this page I need to stop it from unloading. return false isn't working, it still lets the user navigate away (the alerts are there for debugging only)

如果警告为真，页面被卸载，我提供一个确认框，如果他们说不，他们想留在这个页面，我需要阻止它卸载。return false不起作用，它仍然允许用户导航(警报仅用于调试)

Any ideas?

什么好主意吗?

6 个解决方案

#1

onbeforeunload is the one you want; your function "should assign a string value to the returnValue property of the Event object and return the same string". Check the docs from Microsoft and Mozilla for details.

onbeforeunload是你想要的;您的函数“应该为事件对象的returnValue属性分配一个字符串值，并返回相同的字符串”。查看微软和Mozilla的文档。

The string you return will be used by the browser to present the user with a custom confirm box, allowing them to refuse to stay there if they so choose. It has to be done that way to prevent malicious scripts causing a Denial-of-Browser attack.

您返回的字符串将被浏览器使用，以向用户提供一个定制的确认框，如果用户选择的话，允许他们拒绝留在那里。必须这样做才能防止恶意脚本导致浏览器拒绝攻击。

#2

This code warns as per Natalie's suggestion, but disables the warning if a form on the page was submitted. Uses JQuery.

此代码按照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;
});

#3

you want to use the onbeforeunload event.

您希望使用onbeforeunload事件。

#4

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 loose your unsaved changes';
  }
}

isnt supported in chrome, safari and opera

不支持chrome, safari和opera

#5

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?";
}

#6

-5

Try using e.preventDefault() instead of returning false. 'e' would be the first argument to your unload callback.

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

#1