Question

www.example.com/templates/create-template

如果用户离开create-template页，我想警告他们。我的意思是说他们是转到另一页还是转到templates。

我使用此代码在页面重新加载时警告用户，并在表单变脏时路由更改。

function preventPageReload() {
  var warningMessage = 'Changes you made may not be saved';
  if (ctrl.templateForm.$dirty && !confirm(warningMessage)) {
    return false
  }
}

$transitions.onStart({}, preventPageReload);
window.onbeforeunload = preventPageReload

如果通过单击菜单或手动更改它，它可以按预期在页面重新加载和路由更改上正常工作。但是，当我单击“后退”按钮时，它不会触发警告。只有当我第二次单击“后退”按钮，重新加载页面或手动更改路线时，它才会这样做。

我正在使用 ui-router 。当您单击back按钮时，您将从app.templates.create-template状态进入app.templates状态。

如何警告他们是否按“后退”按钮？

Answer 1

首先，您使用错误：

来自https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload：

Note: To combat unwanted pop-ups, some browsers don't display prompts
created in beforeunload event handlers unless the page has been interacted 
with; some don't display them at all. For a list of specific browsers, see the 
Browser_compatibility section.

和

window.onbeforeunload = funcRef

funcRef是对函数或函数表达式的引用。
该函数应为事件对象的returnValue属性分配一个字符串值，并返回相同的字符串。

您无法在onbeforeunload中打开任何对话框。

因为您不需要使用onbeforeunload进行确认对话框。如果在尝试离开页面时函数返回的值不是null或undefined，则浏览器将为您执行此操作。

现在，只要您在同一页面上，onbeforeunload就不会触发，因为从技术上讲您仍然在同一页面上。在这种情况下，您需要在状态更改之前触发一些功能，以便您可以放置确认对话框。

该如何执行取决于所使用的路由器。我在当前项目中使用ui-router，并且已经在uiCanExit函数中进行了检查。

修改：

您可以保持preventPageReload的角度状态变化。但是当用户输入新地址或尝试通过链接等离开页面时，您需要使用其他功能。

示例：

window.onbeforeunload = function(e) {
  if (ctrl.templateForm.$dirty) {
    // note that most broswer will not display this message, but a builtin one instead
    var message = 'You have unsaved changes. Do you really want to leave the site?';
    e.returnValue = message;
    return message;  
  }
}

Answer 2

但是，您可以按以下方式使用它：（使用$transitions）

$transitions.onBefore({}, function(transition) {
    return confirm("Are you sure you want to leave this page?");
});

使用$transitions.onBefore代替$transitions.onStart。

希望这对您有帮助。我还没有测试解决方案。 This one也可以为您提供帮助。

如何警告用户单击后退按钮？

如何警告他们是否按“后退”按钮？

2 个答案: