导航到其他页面时显示像facebook这样的自定义提醒框

Question

我想在用户尝试从现有页面导航时显示自定义警告框而不是浏览器默认警报框。使用此代码：

 window.onbeforeunload = function(){
    return "are you sure?";
 }

我可以使用此代码提醒用户他是否有任何未保存的数据并想要离开页面。但是我想用像facebook这样的自己的设计制作自定义警报框。怎么可能？类似的东西：

 window.onbeforeunload = function(){
    myownalertbox.show();  //here I want to bind leave page or stay on page button with my own button.
 }

我想在此页面上绑定并将此页面按钮保留到我的按钮。

Answer 1

问题不在于实现自定义警报框（正如其他一些答案所指出的那样），这不是一件难事，有很多解决方案，框架，插件等等。问题是JavaScript执行时间。

使用onbeforeunload处理程序无法实现目标，因为它需要同步运行＆＃34;：您无法显示警报，返回某些内容，然后再进行一些回调回来并返回实际值。当您从该功能返回时，浏览器将使用结果，您最终会显示自定义警告框，但用户操作将丢失＆＃34;，因为处理程序已经完成。

为了更进一步，我从来没有找到任何可以提供自定义警报框的解决方案，在这种意义上它同步运行。通过同步行为，我的意思是代码执行将被阻止，直到用户单击警报按钮。我见过的每个自定义提醒/确认/提示解决方案都在使用回调。最后但并非最不重要的是，JavaScript甚至没有提供一种方法来阻止等待＆＃34;。

<强>更新

你可以做什么（而且Facebook也做）是处理您知道将离开页面的导航链接，按钮，点击等，并且您可以在那里显示自定义确认框。

注意：实际上我已经尝试过Facebook，对我来说（Windows 10，Chrome最新版本），当我尝试关闭浏览器标签时，它会提示默认确认框，而不是任何自定义标签。但是，当我点击链接时，它确实显示了一个自定义确认框。总而言之，Facebook在可能的情况下使用自定义的，当不可能时（仅使用onbeforeunload，如浏览器关闭，选项卡关闭，页面重新加载，URL导航等），它使用默认处理机制。

注意2 ：对于2016年，似乎所有主流浏览器都选择不让开发人员自定义onbeforeunload上显示的消息，因此您的string返回值处理程序不会被视为消息。有几篇关于此的文章。主要原因是安全性，因为许多网站使用它来欺骗天真的用户并要求他们做一些操作，或者提示他们恶意内容等等。现在所有主流浏览器都会显示一条关于可能有未保存更改的默认消息。

Answer 2

原始答案适用于IE6-8和FX1-3.5，但现在已经过时了，并且在大多数当前浏览器中都无效 - 我将其留在下面以供参考。

所有浏览器都不会始终如一地对待window.onbeforeunload。它应该是一个函数引用而不是一个字符串（如原始答案所述），但它可以在较旧的浏览器中使用，因为对大多数浏览器的检查似乎是是否有任何内容分配给onbeforeunload（包括返回的函数） null）。

您将window.onbeforeunload设置为函数引用，但在较旧的浏览器中，您必须设置事件的returnValue而不是仅返回字符串：

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

如果您希望用户在没有消息的情况下继续，则不能让confirmOnPageExit执行检查并返回null。您仍然需要移除事件以可靠地打开和关闭它：

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

要打开它：

window.onbeforeunload = "Are you sure you want to leave?";

将其关闭：

window.onbeforeunload = null;

请记住，这不是正常事件 - 您无法以标准方式绑定它。

检查值？这取决于您的验证框架。

在jQuery中，这可能是（非常基本的例子）：

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

Answer 3

我会使用一些普通的HTML布局，并使用CSS的display:none; / display:block;

例如（你做造型）：

CSS：

.popup {
  display: none;
  position: absolute;
  left: 20%;
  top: 20%;
  height: 60%;
  width: 60%;
  background-color: orange;
}

JAVASCRIPT：

var myownalertbox = {

  show: function(message) {
    var popup = document.createElement("DIV");
    popup.className = "popup";
    document.body.appendChild(popup);
    popup.style.display = "block";
    popup.innerHTML = message;
    var ybutton = document.createElement("BUTTON");
    ybutton.innerHTML = "YES";
    var nbutton = document.createElement("BUTTON");
    nbutton.innerHTML = "NO";
    ybutton.onclick = function () {
     // do with "YES"
     window.location = "/main.html"; // <-- go back to the main page
     popup.style.display = "none";
    }
    nbutton.onclick = function () {
     // do with "NO"
     window.location = "#"; // <-- stay at this page
     popup.style.display = "none";
    }
    popup.appendChild(ybutton);
    popup.appendChild(nbutton);
  }
}

myownalertbox.show("ARE YOU SURE?");

这是JSFiddle。

Answer 4

您可以试试这个网站。 http://t4t5.github.io/sweetalert/ 它不是一个自定义警报框，但它提供的警报框实际上非常漂亮。

Answer 5

我附加了一个链接，我使用代码来自定义对话框/警告框。希望这对你有帮助。

http://www.bitrepository.com/stylish-javascript-dialog-boxes.html