マルチページWebサイトブラウザの戻るキーを無効にする
1704 ワード
タイトルに記載されているように、本明細書で提供される方法は、SPA単一ページアプリケーションなどのマルチページウェブサイトには適用されない.
Windowsを利用する私はあなたを愛しています.history.pushState制御ブラウザの後退キーが無効になりました.次に、どのように実現するかを説明します.
1.ブラウザの後退キーを禁止する必要があるページに、次のコードを追加します.
上のコードを加えると、ブラウザの後退キーをクリックすると、ページが後退していないことがわかります.問題が解決したような気がしますが、再び後退キーをクリックすると、ページは前のページに戻ります.
原因はwindowです.history.PushState()メソッドは、ブラウザ履歴にステータスを追加します.ステータスオブジェクト(ページのパラメータ)、タイトル(現在は無視されています)、オプションのURLアドレスの3つのパラメータがあります.
ページにwindowと書いたらhistory.pushState({},null,location.href);ブラウザはhistoryにlocationを追加します.hrefは、同時にページがジャンプしませんが、一度だけ追加したので、一度だけ後退イベントに役立ちます.どうやってこの問題を徹底的に解決しますか?また、onpopstateイベントをグローバルに追加する必要があります.詳細は2ステップを参照してください.
2.グローバルにonpopstateイベントを追加します.ここでは匿名関数を使用しています(もちろん直接書くこともできます):
このとき、ターゲットページでブラウザのロールバックキーをクリックすると、ページがジャンプせず、問題が解決します.しかし、上のコードはどういう意味ですか?
window.onpopstateイベントは、ブラウザの後退、前進ボタン(またはJavaScriptコードでhistory.back()、historyを呼び出す)をリスニングします.forward()、history.go()メソッドですがhistoryのように呼び出されます.义齿replaceState()はpopstateイベントをトリガーしません.
したがって、popstateリスニングイベントをグローバルに追加しますが、ユーザーが後退ボタンをクリックすると、histroyに再びリンクを追加し、ユーザーが再び後退ボタンをクリックしないようにします.
Windowsを利用する私はあなたを愛しています.history.pushState制御ブラウザの後退キーが無効になりました.次に、どのように実現するかを説明します.
1.ブラウザの後退キーを禁止する必要があるページに、次のコードを追加します.
$(document).ready(function(){
// history pushState,
if(window.history && window.history.pushState){
window.history.pushState({},null,location.href);
}
});
上のコードを加えると、ブラウザの後退キーをクリックすると、ページが後退していないことがわかります.問題が解決したような気がしますが、再び後退キーをクリックすると、ページは前のページに戻ります.
原因はwindowです.history.PushState()メソッドは、ブラウザ履歴にステータスを追加します.ステータスオブジェクト(ページのパラメータ)、タイトル(現在は無視されています)、オプションのURLアドレスの3つのパラメータがあります.
ページにwindowと書いたらhistory.pushState({},null,location.href);ブラウザはhistoryにlocationを追加します.hrefは、同時にページがジャンプしませんが、一度だけ追加したので、一度だけ後退イベントに役立ちます.どうやってこの問題を徹底的に解決しますか?また、onpopstateイベントをグローバルに追加する必要があります.詳細は2ステップを参照してください.
2.グローバルにonpopstateイベントを追加します.ここでは匿名関数を使用しています(もちろん直接書くこともできます):
;(function(window,undefined){
'use strict'
// history pushState,
if(window.history && window.history.pushState)
{
window.onpopstate = function(){
window.history.pushState({},null,"");
//window.history.forward(1); , ,
}
}
})(window);
このとき、ターゲットページでブラウザのロールバックキーをクリックすると、ページがジャンプせず、問題が解決します.しかし、上のコードはどういう意味ですか?
window.onpopstateイベントは、ブラウザの後退、前進ボタン(またはJavaScriptコードでhistory.back()、historyを呼び出す)をリスニングします.forward()、history.go()メソッドですがhistoryのように呼び出されます.义齿replaceState()はpopstateイベントをトリガーしません.
したがって、popstateリスニングイベントをグローバルに追加しますが、ユーザーが後退ボタンをクリックすると、histroyに再びリンクを追加し、ユーザーが再び後退ボタンをクリックしないようにします.