32

OK、これは私がやろうとしていることです（Googleはほとんどこれもやっていると思います）：

シナリオA：

ページ/Main_Pageに3つのセクションがあるとしましょう。ユーザーがセクションAの「リンク」をクリックすると、section AのコンテンツがAJAXを介して読み込まれ、ページに埋め込まれます。

シナリオB：

が/Main_Page/Section_A読み込まれると、実際には（シナリオAのように）まったく同じページに移動し、以前と同じようにAJAXを介して/Main_Page読み込まれます。Section A

問題 ：

結果として同じ結果のページが2つありますが、URLが異なります（最初の場合はちょうど/Main_Page、2番目の場合は/Main_Page/Section_A）。

私がやりたいこと ：

  • シナリオAでは、AJAXを介してロードした後、リダイレクトやページの再読み込みなどを行わずに、（ブラウザーのアドレスバーに）表示されるURLが（またはその他のことでSection A）表示されるようにするにはどうすればよいですか？/Main_Page/Section_A
4

2 に答える 2

55

問題は、 History APIを実装することで、特にメソッドを使用することで解決できますpushState()。MDNでそれについて読むことをお勧めします。History.jsと呼ばれるオールインワンソリューションもあり、x-browserを簡単に実装するのに役立ちます（#ブラウザーがサポートしていない場合は、URLハッシュにフォールバックします）。

次に例を示します。

history.pushState('', 'New Page Title', newHREF);

十分に興奮していませんか？これは、実装を促すデモです。

于 2012-08-13T11:01:27.027 に答える
9

チュートリアルを見つけたところ、うまくいきました。

$('a').click(function(){
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() {
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

上記のコードは http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/から入手しました。

于 2013-07-30T12:18:20.280 に答える