能否通过编程方式触发onbeforeunload事件？

Question

我目前正在使用jquery-form-observe插件，它使用onbeforeunload提示用户存在“未保存”的更改。

但是，有一个场景需要在按钮点击时触发该功能：按钮点击最终导致页面更改，但我希望在他们开始进行此操作之前，向用户提示。

所以是否有一种通过jQuery或其他方式触发onbeforeunload的方法？

- mutex

Answer 1

我不知道是否有直接的方法来实现这个功能，但你可以自己模拟浏览器的确认框。这里有一个基于MSDN规范编写的简单函数：

function triggerBeforeUnload() {
  var event = {};
  handler(event);

  if (typeof event.returnValue == 'undefined' ||
      confirm('Are you sure you want to navigate away from this page?\n\n' + event.returnValue + '\n\nPress OK to continue, or Cancel to stay on the current page.')) {
    // Continue with page unload
  } else {
    // Cancel page unload
  }
}

编辑：在jquery.formobserver.js中，在function beforeunload(e) { ... }的定义之后，加入以下行：

handler = beforeunload;

请注意原始代码的更改：window.onbeforeunload已被替换为handler。

- casablanca

---

在Firefox和IE8上，我在调用window.onbeforeunload时遇到了错误。 Firefox的错误是“window.onbeforeunload不是函数”，而IE返回“对象不支持此属性或方法”。 - mutex

好的，问题就在于该插件通过addEventListener/attachEvent附加事件处理程序，而不是直接通过window.onbeforeunload。我猜你将不得不修改插件代码以获取对beforeunload函数的引用。 - casablanca

谢谢！现在可以工作了。您有避免使用全局处理程序的建议吗？ - mutex

我想不出来有什么问题，但最好还是将 handler 重命名为不会与其他名称冲突的东西。 - casablanca

@casablanca，你能为这个做一个jsfiddle吗？ - Vishnudev K

Answer 2

你可以使用 .trigger() 方法来完成：

$('button').click(function(){
    $(window).trigger('beforeunload');
});

- Pat

---

那是我尝试的第一件事，但似乎无法在“beforeunload”上使用触发器，因为当我调用它时似乎没有任何反应。 - mutex

@mutex 我在回答之前也有同样的疑问，所以我设置了这个简单的测试：http://jsfiddle.net/LpGq9/。也许与表单观察插件如何绑定 onbeforeunload 事件处理程序有关。 - Pat

是的，你可能是正确的。该插件没有使用bind；而是使用以下代码：if(window.attachEvent){ window.attachEvent('onbeforeunload', beforeunload); }else if(window.addEventListener){ window.addEventListener('beforeunload', beforeunload, true); } - mutex