1

jQuery に大きく依存している単一ページの Web サイトがあります。ポートフォリオとして、ユーザーは、jQuery がメイン ページを非表示にするさまざまなデザインをクリックし、クエリ文字列によって返されるコンテンツに基づいてデザイン ページを再構築できます。

問題は、メインのポートフォリオ ページに戻りたい人は、ブラウザの [戻る] ボタンを自然に押してしまい、以前にアクセスしていた Web サイト (Google 検索など) に戻ることです。実際には、意図した動作はメインに戻ることです。

私の質問は、[戻る] ボタンが複数ページの Web サイトであるかのように機能するように実装する最善の方法は何かということです。クエリの独自のスタックを実装する必要がありますか? 最良の選択肢は何ですか。

どうもありがとう。動作を確認したい場合は、この Web サイトを参照してください。

4

5 に答える 5

3

History.js ライブラリを見てください。最新のブラウザの両方を処理し、古い HTML4 ブラウザのフォールバックを備えています。

https://github.com/browserstate/history.js/

内部のイベントハンドラーで$(".mLink").click(function(){...

スクロールをトリガーするたびに、このようなものを追加できます

case "mL0":
    $("html, body").stop().animate({ scrollTop: 0}, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?home"); 
    break;
case "mL1":
    $("html, body").stop().animate({ scrollTop: ($('#filter').offset().top-72) }, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?portfolio"); 
    break;
...

美しいポートフォリオサイト、ところで。

于 2013-06-18T03:17:54.997 に答える
2

HTML5 History APIを調べることをお勧めします。開始方法に関するチュートリアルはたくさんありますが、基本的な要点は、jQuery で新しい「ページ」をロードするときに、それを履歴スタックにプッシュすることです。

// After loading the new page...
window.history.pushState({}, '', 'newpage.html');

これにより、ページが読み込まれなくても、ユーザー エージェントyoursite.com/newpage.htmlが URL バーに表示されます。

Caniuse は、history API のサポートがかなり優れていると報告しています。通常の容疑者 (IE 7 および 8) はサポートされていませんが、ポリフィルが 利用可能です。

History API に関する唯一の注意事項 (これは重要な注意事項です) は次のとおりですhistory.pushState。ユーザーは URL バーから URL をコピーして共有することができるため、ページ名は実際のページに対応している必要があります。これに関する問題は、動的にロードする個別のページがないため、実際にはサイトで機能するようには見えないことです。

あなたのポートフォリオは 1 つの連続したページのように見えるので、そのためにはハッシュ URL を使用することをお勧めします。つまり、yoursite.com/#aboutやのような URLyoursite.com/#contactです。新しいページをロードするときにハッシュを含めるように更新できwindow.locationます (ブラウザはページを再ロードしません)。

window.location = '#new-page-that-was-just-navigated-to';

または、単に更新することもできますwindow.location.hash。このプロパティを使用してサイトを読み込むときに、javascript を使用してハッシュの内容を調べて、表示するページを決定できます。

$(document).ready(function() {
    switch(window.location.hash) {
        case 'home': // load home
        case 'about': // load about
        default: // load default page (index)
    }
});

さらに、HashChange イベントを使用して HTML から JS を抽象化できます(ポリフィルはMDN ドキュメント ページで利用できます)。これを行う代わりに：

<a href="javascript:void(0);" id="about">About</a>
<a href="javascript:void(0);" id="projects">Projects</a>
<a href="javascript:void(0);" id="contact">Contact</a>

<script>
document.getElementById('about').addEventListener('click', function() {
    // navigate to about page
}, false);

document.getElementById('projects').addEventListener('click', function() {
    // navigate to projects page
}, false);

//etc.
</script>

代わりにこれを行うことができます：

<a href="#about" id="about">About</a>
<a href="#projects" id="projects">Projects</a>
<a href="#contact" id="contact">Contact</a>

<script>
window.addEventListener('hashchange', function() {
    switch(window.location.hash) {
        case 'about': // load page
        case 'projects': // load page
        case 'contact': // load page
        default: // not found
    }
}, false);
</script>

これの利点は、リンクに意味のある href があり、サイトの各リンクにイベント リスナーを追加する必要がないことです。ハッシュを割り当ててリッスンするだけですhashchange。

編集

これは jQuery でも機能することに注意してください。

$(window).on('hashchange', function() {
    switch(window.location.hash) {
        case 'about': // load page
        case 'projects': // load page
        case 'contact': // load page
        default: // not found
    }
});
于 2013-06-18T03:37:28.980 に答える
2

URLにハッシュタグを入れてみませんか？このようなもの？

<a href="#about">About</a>

そして、コードのどこかにこれを含む行があるはずですか?

<div id="about">
  <h2>About/h2>
  <!-- More content here -->
</div>
于 2013-06-18T02:59:48.827 に答える
0

「history.pushState」を使用して、クリックしたメニュー エントリに基づいて URL を変更できます。この Web ページの例を確認できます - http://html5.gingerhost.com/。

通常、[戻る] ボタンは前の URL に移動し、AJAX ページでは URL 自体は更新されません。「history.pushState」を使用して URL を明示的に変更すると、BACK は期待どおりに機能します。

これにより、サイトが検索エンジンに適したものになります

于 2013-06-18T03:18:28.797 に答える