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

Question

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

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

我们的 SAPUI5/Openui5 应用程序使用路由概念 (sap.ui.core.routing.Router)，因此该应用程序具有 'HASH URL'。

对于 1 和 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

但是对于 pt.3 - 当用户按下返回按钮时，哈希值 URL 会发生变化。根据 Whosebug 上的其他讨论，使用浏览器历史记录或禁用浏览器后退按钮不适用于 Browser/Web World。

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

显示弹出窗口，让用户可以选择留下或离开（通知页面更改将会丢失）
如果用户选择留下，则 URL 将保留，包括 'HASH URL' 部分。

Answer 1

实现此目的的一种可能方法是禁用从 Hasher 插件调度已更改的事件，并自行处理 hashchange 事件以向用户提示确认消息。您需要确保仅当您的用户处于相关编辑视图时才执行此操作，然后 re-enable 一旦用户单击取消、保存或确认导航离开后的标准逻辑。

粗略的例子如下...

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();

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

On Browser Back button handling of Hash URL change for SAPUI5/OpenUI5

back-button

sapui5