ブラウザでSAPUI5/OpenUI5のHash URL変更のバックボタン処理

Question

SAPUI5シェルをindex.xhtmlページ内のdivに配置しました。ユーザーが我々のアプリケーション内のデータを変更すると、ユーザーはアプリケーションから離れて移動するためのアクションの3種類を行うことができます。

1. を押して、我々のアプリケーションに
2. 種類、ブラウザのアドレスバーにいくつかの他のURLをキャンセルボタン
3. ブラウザバーの戻るボタンを押します。

私たちのSAPUI5/Openui5アプリケーションは、ルートコンセプト（sap.ui.core.routing.Router）で動作し、アプリケーションには「HASH URL」があります。

は1 & 2については、我々は次の変更を行い、それが

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

Mozillaの勧告（Mozillaの勧告に基づいて）の作品 - https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

しかしpt.3のため - ユーザーが[戻る]ボタンを押します、 HASH URLが変更されます。 Stackoverflowに関する他の議論に基づいて、ブラウザの履歴で遊んだり、ブラウザの戻るボタンを無効にしても、ブラウザ/ Web Worldでは機能しません。

ブラウザのバックボタンが押されたときに次の操作を行うための方法があります：ユーザーは（ページ内の通知の変更は失われます）、滞在またはままにするオプションを与え

1. を表示するポップアップ
2. をユーザーが選択した場合は、滞在するには、「HASH URL」部分を含むURLが残ります。

Answer 1

可能な方法の1つは、Hasherプラグインから変更されたイベントのディスパッチを無効にし、ハッシュチェンジイベントを自分で処理して確認メッセージを表示することです。ユーザーが問題の編集ビューにいる間だけこれが行われていることを確認し、ユーザーがキャンセル、保存、確認をクリックすると標準ロジックを再度有効にしたい場合があります。

本のラフな例は以下のよう...

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