そのため、ページを更新する必要がないようにコンテンツを動的にロードするスクリプトを作成しようとしています (メイン コンテンツは置き換えられますが、サイドバー、ヘッダー、フッターなどは同じままです)。場所)。イベントが発生しpushState()
、URL を更新するために使用しています。window.history.back()
ただし、 andをどのように使用すればよいかわかりませんwindow.history.forward()
。正常に移動するには、これら 2 つの関数を再定義する必要がありますか?
3 に答える
私が見つけた最も簡単な方法は(私が思うに)あなたが求めていることをwindow.location.hashに接続することです。
window.location.hash='page_1';
次に、イベント ハンドラーをハッシュの変更にバインドし、AJAX をページ 1 に移動できます。
ハッシュを変更すると、新しい履歴ページが作成されるため、window.history で何もする必要はまったくありません。
を使用PushState
して URL を更新しているため、履歴はその機能をサポートするすべてのブラウザーで既に処理されています。ただし、古いブラウザはサポートしていないためPushState
、テストする必要がある場合があります
if (history.pushState) { //is supported }
ここでは、 History.jsスクリプトを使用することをお勧めします。HTML4 ブラウザーでは古い onhashchange 機能を使用し、HTML5 では pushState を使用するように戻ります。history.forward
手動で処理する必要はありません。
また、ウェブサイトのブックマークとページリンクが正しく機能するように、.htaccess を設定する必要があります。
履歴pushState()
はありますが、ページを更新せずにロードできるように URL を渡す必要があります。windows.history.back()
ただし、ブラウザのキャッシュから最後にアクセスしたページが自動的に取得されます。ここでは URL を渡していません。同じことが適用さ windows.history.forward()
れます。