ホームページ > 記事 > ウェブフロントエンド > JavaScriptの「戻る」ボタンが機能しない場合の解決策
JavaScriptの「戻る」ボタンが機能しない場合の解決策
- PHPzオリジナル
- 2023-04-21 09:08:51951ブラウズ
日々の Web 開発では、ページの「戻る」ボタンを無効にする必要がある状況によく遭遇します。これにより、ユーザーが Web ページでブラウザの「戻る」機能を使用できなくなり、Web ページのセキュリティと安定性が保護されます。 JavaScript を使用してこの機能を実装すると、「戻る」ボタンが使用できない状況が発生する可能性があります。次に、この問題を解決する方法を説明します。
1. 問題の原因
JavaScript でブラウザの戻るボタンを無効にするには、通常、ブラウザの履歴を操作することで実現できます。次の 2 つのメソッドを実行すると、戻るボタンが無効になります。
history.forward() history.back()
ただし、場合によっては、これらのメソッドでは戻るボタンを無効にできないことがあります。通常、この状況は次の 2 つの状況で発生します。
- 現在のページは HTTP POST メソッドを通じて送信されたフォームであり、フォームには大量のデータが含まれています。
- Web ページの実行環境では、コードの実行が非常に高速であるため、history.forward() メソッドまたはhistory.back() メソッドが実行されるときに、ブラウザーがこれらの操作に時間内に応答しません。
2. 解決策
上記 2 つの状況に対しては、次の解決策を採用できます。
- URL を変更して戻る機能を実現する
ページの URL に特定の識別子を追加することで戻る機能を実装できます。ユーザーが戻るボタンをクリックしたとき、ウィンドウ オブジェクトの Popstate イベントをリッスンし、URL にこの識別子が含まれているかどうかを判断するだけで、ユーザーが戻る必要があるかどうかを判断できます。コードは次のとおりです:
window.addEventListener('popstate', function(event) {
if (event.state && event.state.isBack) {
// 执行后退操作
}
});
var state = {
isBack: true
};
history.pushState(state, '', '#back');
上記のコードでは、最初にウィンドウ オブジェクトの Popstate イベントをリッスンします。イベントがトリガーされると、event.state オブジェクトに isBack フィールドが含まれているかどうかを判断します。存在する場合は、Back 操作を実行します。 「戻る」ボタンを無効にする必要がある場合は、history.pushState() メソッドを呼び出して、無効にする必要がある場所に識別子を持つ状態オブジェクトを追加するだけです。
- ウィンドウ オブジェクトの onbeforeunload メソッドを変更して戻るを実現する
ウィンドウ オブジェクトの onbeforeunload メソッドをオーバーライドすることで、「戻る」ボタンを無効にすることもできます。ユーザーが [戻る] ボタンをクリックすると、onbeforeunload メソッドがオーバーライドされるため、ブラウザーに確認ボックスが表示されます。このとき、ユーザーは確認ボックスで [このページに留まる] を選択することによってのみ現在のページに留まることができます。コードは次のとおりです。
window.onbeforeunload = function() {
return "是否离开当前页面？";
}
上記のコードでは、window オブジェクトの onbeforeunload メソッドをオーバーライドし、確認ボックスを返します。ユーザーが戻るボタンをクリックすると、ブラウザは確認ボックスを表示しますが、ユーザーは「このページに留まる」を選択することによってのみ現在のページに留まることができるため、戻るボタンは無効になります。
概要:
ブラウザの「戻る」ボタンを無効にする 場合によっては、「戻る」ボタンが使用できないという問題が発生することがあります。この問題は、URL を変更するか、onbeforeunload メソッドをオーバーライドすることで解決できます。 「戻る」ボタンを無効にする必要がある場合は、無効にする必要がある対応するメソッドを呼び出すだけです。
以上がJavaScriptの「戻る」ボタンが機能しない場合の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。