Question

我们将SAPUI5 Shell放在index.xhtml页面内的div处。当用户修改我们的应用程序中的数据时，用户可以执行3种类型的操作来导航离开应用程序：

按我们的应用程序中的取消按钮
在浏览器地址栏中输入其他一些网址
按浏览器栏中的后退按钮。

我们的SAPUI5 / Openui5应用程序使用路由概念（sap.ui.core.routing.Router），因此应用程序具有“HASH URL”。

1＆amp; 2，我们做了以下更改并且它有效（基于Mozilla推荐）

window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

Mozilla建议 - https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

但是对于第3页 - 当用户按下BACK BUTTON时，HASH URL会改变。根据对Stackoverflow的其他讨论，使用浏览器历史记录或禁用浏览器后退按钮不适用于Browser / Web World。

按下浏览器后退按钮时有没有办法执行以下操作：

显示弹出窗口，向用户提供“保留或离开”选项（通知页面中的更改将丢失）
如果用户选择留下，则URL仍然包含“HASH URL”部分。

Answer 1

您可以实现此目的的一种可能方法是禁用从Hasher插件调度已更改的事件并自行处理hashchange事件以提示用户输入确认消息。您可能希望确保仅在用户处于相关编辑视图时执行此操作，然后在用户单击取消，保存或确认导航后重新启用标准逻辑。

以下是一个粗略的例子......

onInit: function() {
  this._hashHandler = (function(){
    var sCurrentHash;

    var fnHandleHashChange =function(e){
        var sOldHash = e.oldURL.substr(e.oldURL.search("#")+1);
        var sNewHash = e.newURL.substr(e.newURL.search("#")+1);

        if(sCurrentHash!==sOldHash){
            return;
        }

        if(confirm("Are you sure you want to navigate away?")){
            window.removeEventListener("hashchange",fnHandleHashChange);
            window.hasher.setHash(sOldHash.substr(1));
            window.hasher.changed.active=true;
            window.hasher.setHash(sNewHash.substr(1));
        } else {
            window.hasher.setHash(sOldHash.substr(1));
        }
    }

    return {
        startManualHashChangeHandling: function() {
            sCurrentHash = window.location.hash.substr(1);
            window.hasher.changed.active=false;
            window.addEventListener("hashchange",fnHandleHashChange);
        },
        stopManualHashChangeHandling: function() {
            window.hasher.changed.active=true;
            window.removeEventListener("hashchange",fnHandleHashChange);
        }
    };
  }());
}

...所以每当你想要阻止用户导航而没有确认时（例如在onEdit或onRouteMatched方法中）你可以调用...

this._hashHandler.startManualHashChangeHandling();

...然后禁用手动哈希更改处理（例如在onCancel或onSave成功方法中）...

this._hashHandler.stopManualHashChangeHandling();

在浏览器后退按钮处理SAPUI5 / OpenUI5的哈希URL更改

1 个答案: