web-dev-qa-db-ja.com

JavaScriptまたはAngularJSを使用してブラウザーの戻るボタンを制御または無効にする

JavaScriptまたはAngularJSを使用してブラウザーの戻るボタンを制御または無効にする

ここでは質問をしていませんが、AngularJSまたはJavaScriptを使用している場合、ブラウザの戻るボタンを無効にして制御する方法の解決策を示したいと思います。

javascriptangularjsbuttonbrowserback
12
Wael

Javascriptを使用している場合は、このリンクから[戻る]ボタンを無効にする方法を確認できます。

http://jordanhollinger.com/2012/06/08/disable-the-back-button-using-html5/

ただし、AngularJSはバックグラウンドでURL_Hash＃を使用するため、上記のコードはAngularJSではうまく機能しません。そのため、ここでどのように対処するかを示します。

メインのJavaScriptコード（AngularJSコードまたはコントローラー内ではない）に、次のコードを追加します。

// *** Author: Wael Sidawi
// ****  Deactive Back Button **** 
var history_api = typeof history.pushState !== 'undefined';
// history.pushState must be called out side of AngularJS Code
if ( history_api ) history.pushState(null, '', '#StayHere');  // After the # you should write something, do not leave it empty

そして、AngularJS Controler内に次のイベントリスナを追加します。

/**
 * Event-Listner for Back-Button
 */
$scope.$on('$locationChangeStart', function(event, next, current){            
    // Here you can take the control and call your own functions:
    alert('Sorry ! Back Button is disabled');
    // Prevent the browser default action (Going back):
    event.preventDefault();            
});

それがあなたのお役に立てば幸いです。

宜しくお願いします

ワエル

14
Wael