2

ユーザーがボタンをクリックしてコンテンツをロードするWebサイトがあり、クリックすると、<div>AJAXとjQueryで内部htmlを変更して中央要素のコンテンツのみを更新するjavascript関数が呼び出されます。

たとえば、訪問者が連絡先ページに移動したい場合、連絡先ボタンをクリックすると、外部ファイルからそのコンテンツを取得し、それを使用して div を置き換えることにより、連絡先フォームに div の内容が更新されますinnerHTML。ページ全体がリロードされていないため、ページ全体の実際のアドレスは変更されずinnerHTML、div のみが変更されます。

これに加えて、私のサイトは PHP を使用しており、URL に変数を渡すことで、ページの読み込み時にさまざまなコンテンツを div に入力できるようにコーディングしました。たとえば、index.php?page=homeは PHP スクリプトに外部ファイルからホームページのコンテンツをロードするように指示し、index.php?page=contactはコンタクト フォームをロードします。このようにして、検索エンジンは、サイトマップのこれらのリンクをたどることで、各ページとそのコンテンツを見つけることができます。

私の問題は、訪問者がボタンをクリックして別のコンテンツを div にロードした後、ブラウザのリロード ボタンをクリックするか CTRL+R を押すと、ページ全体がリロードされ、もちろん div が元のコンテンツに戻ることです。

私の質問は、ブラウザが更新されたときに特定のページをロードする方法はありますか? たとえば、訪問者がページを読み込んindex.php?page=homeでからお問い合わせボタンをクリックして div コンテンツを更新し、ブラウザの更新ボタンを押した場合index.php?page=contact、ページの外観とコンテンツ？

4

2 に答える 2

1

オプション 1: location.hash

より簡単ですが、堅牢ではありません。一見の価値はありますが、複数の要素の状態を保存する場合は、おそらくオプション 2が必要です。

これは、以下のコードのデモンストレーションです。

例：

function onHashChange() {
    var hash = window.location.hash;
    // Load the appropriate content based on the hash.
}

$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);

$('#button').click(function(){
    window.location.hash = "home";
});

このように、ボタンの変更時にハッシュを変更し、hashchangeイベントを使用してページの読み込みを処理するだけです。

オプション 2: History.js を使用した History API

実装するのは少し難しいですが (それほどでもありません!)、はるかに堅牢です。広く使用されているフレームワークに依存しています。

もう 1 つの、おそらくよりクリーンな方法は、History API を使用することです。ページを更新せずに変更できるためwindow.location、JavaScript を使用してそれらの変更を処理できます。

まだすべてのブラウザーが API をサポートしているわけではありませんが、必要に応じてフォールバックを提供するHistory.jsを使用できます。これがデモです。location.hash

History.js の github ページから:

History.jsは、すべてのブラウザーで HTML5 History/State API (pushState、replaceState、onPopState) を適切にサポートします。データ、タイトル、replaceState の継続的なサポートを含みます。jQuery、MooTools および Prototype をサポートします。HTML5 ブラウザーの場合、これは、ハッシュを使用する必要なく、URL を直接変更できることを意味します。HTML4 ブラウザーの場合は、古い onhashchange 機能を使用するように戻ります。

History.js の例:

function onStateChange() {
    var state = window.History.getState();
    // Handle state accordingly.

    // Fetch the data passed with pushState.
    var data = state.data;
    var title = state.title;
    var url = state.url;
}

// Check the initial state.
$('document').on('load', onStateChange);

// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);

// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' } 

// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");

州名はほとんどのブラウザで無視されます。3 番目のパラメーターは、URL に追加されるビットです。

于 2013-02-02T03:58:37.620 に答える