浏览器关闭时显示弹出窗口

Question

我正在开发一个电子商务(PHP)网站，以下是我的要求。

当客户离开订单页面或关闭浏览器时， 我希望通过弹出窗口或警示框来推荐另一个产品。 如果他们选择“是”，它将重定向到另一个产品页面， 而不是关闭窗口。

我尝试了在 body 的 "onunload" 事件中使用 javascript window.open()。 但浏览器一直阻止它。

有没有方法可以实现这个功能？

谢谢， Den

- Den

---

如果 e.preventDefault() 或 window.event.returnValue = false 无法解决问题，那么自定义模态对话框就没有办法了... 很多浏览器会阻止 window.open() 弹出窗口，因此使用 JavaScript + CSS 创建人工弹出窗口比使用 window.open() 更好（在我看来）。 - BlitZ

使用 JavaScript 的 alert 和 confirm 函数。 - Class

使用 confirm() - 根据规范，它必须是阻塞的。 - Qantas 94 Heavy

我不会成为一家以这种方式让我烦恼的商店的顾客。 - user557846

somevalue = confirm(text, default); if(somevalue){redirect} - Class

Answer 1

首先：这真的不太友好。就像@Dagon所说，没有人想被限制离开一个页面，然后看到一堆不同的物品广告。话虽如此，我相信你有一个合法的理由，或者被告知要这样做。因此，这是我的回答---

使用onunload事件没有办法实现此功能。一旦该事件被触发，就没有机会重定向或取消卸载，因为它确实在卸载事件上。

您最好的选择是在onbeforeunload事件中执行此操作。这是唯一一个真正暂停onunload事件并且可以取消执行onunload的事件。 onbeforeunload事件有两个不同的结果：

1.如果您在onbeforeunload事件中返回某些内容，则当用户尝试导航时，将出现默认对话框，并显示您的文本。用户可以点击“确定”或“取消”。如果他们点击“确定”，浏览器将继续导航。如果用户点击“取消”，则onunload事件将被取消。令人惊讶的是，这似乎是在没有锚定的情况下取消onunload事件的唯一方法。

2.如果您没有返回任何内容，则在用户不知道的情况下执行onbeforeunload事件中的代码。（这段代码必须相对较短，因为onbeforeunload事件不允许太多时间）。

一个您可能想尝试的想法（我从未尝试过）是尝试在onbeforeunload事件的返回语句中添加一个超链接。同样，不知道这是否有效。

下面是onbeforeunload和onunload事件的非常简单的示例：

<script type="text/javascript"> //may not be neccesary for your code

window.onbeforeunload=before;
window.onunload=after;

function before(evt)
{
   return "This will appear in the dialog box allong with some other default text";
   //If the return statement was not here, other code could be executed silently (with no pop-up)
}

function after(evt)
{
   //This event fires too fast for the application to execute before the browser unloads
}

</script>

我知道你想创建一个警告或确认弹出窗口，但这也存在一些问题。典型的程序员没有访问onbeforeunload和onunload事件源代码的权限，因此没有人能够百分之百确定它们的操作。根据我的测试，我所知道的是似乎不可能只出现一次自定义弹出窗口并执行其他代码。

如果用户关闭网页，唯一捕获该操作的方法是在onbeforeunload事件中进行。这个无法避免。如果用户使用后退按钮，则onbeforeunload事件也会触发。我知道你的最终目标是什么，但我有一个建议，如果允许的话。尝试在页面上锚定链接或按钮。如果必须要有这个弹出窗口，唯一可靠的方法就是将弹出窗口锚定到页面上的链接/按钮上。但是，当然，这只有在他们试图使用您的链接导航时才有效（这将更加用户友好），但是如果他们尝试使用外部链接（如收藏链接或关闭浏览器）导航，那么它将不被执行。

祝你在努力中好运。Onbeforeunload和onunload很棘手。

- Brian

Answer 2

在我的门户网站中也是一样的，当用户关闭浏览器时，我需要一些时间来延迟重置一些数据。我使用下面的代码，它对我很有效。 当用户关闭浏览器、标签或尝试重定向到另一个页面时，会显示一个消息供用户选择留下或离开。

var validNavigation = false;

function wireUpEvents() {

  var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
  var leave_message = cmsLeaveMessage;
  function goodbye(e) {
    validNavigation = isUserLoggedIn == 0 ? true :  validNavigation;
    if (!validNavigation) {
      if (dont_confirm_leave!==1) {
        if(!e) e = window.event;
        //e.cancelBubble is supported by IE - this will kill the bubbling process.
        e.cancelBubble = true;
        e.returnValue = leave_message;
        //e.stopPropagation works in Firefox.
        /*
        if (e.stopPropagation) {
          e.stopPropagation();
          e.preventDefault();
        }
        */
        //return works for Chrome and Safari
        $.ajax({
            url: linkResetTask,
            type: 'POST',
            dataType: "html",
            success:function(){
                init("Employee");
            }
        });
        validNavigation = false;
        return leave_message;
      }
    }else
    {
        validNavigation = false;
    }
  }

  $(window).bind('beforeunload', goodbye );


  // Attach the event keypress to exclude the F5 refresh

    $(document).bind('keydown keyup', function(e) {
        if(e.which === 116) {
           validNavigation = true;

        }
        if(e.which === 82 && e.ctrlKey) {
           validNavigation = true;

        }
    }); 

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
  wireUpEvents();
});

- JamesN