web-dev-qa-db-ja.com

AJAXおよびブラウザの戻るボタン

私はwww.darknovagames.comでブラウザベースのゲームを実行しています。最近、私はCSSを使用してサイトの再フォーマットに取り組んでおり、すべてのページをHTML標準に従って検証するようにしています。

私は左側にナビゲーションメニューを表示するというこのアイデアをいじっていますAJAX(ユーザーを毎回別のページに移動するのではなく、タイトルとナビゲーションのリロードが必要です)バーはほとんど変更されません)、変更すると、ブラウザの[進む]/[戻る]ボタンが壊れる可能性があることを私は知っています。私の質問は、先に進んでAJAXサイトであるため、ユーザーはサイトナビゲーションを使用してゲームをプレイする必要がありますか、それともサイトを現在の状態のままにして、ナビゲーションに標準のハイパーリンクなどを使用する必要がありますか?

私が推測する理由は、私がフォーラムシステムをサイトに組み込んだことであり、多くの場合、フォーラム内の特定のトピックにリンクしたいと思います。

私も提案を受け付けています。ユーザーがブックマークしたり、前後に移動したりできるようにURLを変更しながら、サイトの本文領域のみを再読み込みする標準的な(できれば従来のフレームなしの)方法はありますか?それは私の問題も解決する可能性があります。私はここで最善の解決策を求めているだけであり、特定の質問に対する答えではありません。 ^ _ ^

ありがとう

32
Nicholas Flynt

AJAXを有効にする場合は、サイトのすべての重要なページにアクセス可能なURLを用意することを犠牲にして有効にしないでください。これは、人々が使用できるナビゲート可能なサイトのバックボーンです。

すべての機能をAJAX呼び出しとコールバックにシャベルするとき、基本的に、ユーザーが必要な機能とコンテンツにアクセスするための単一のパスにユーザーを強制します。これは、Webの方法に完全に反します。人々はアドレスバーと戻るボタンに依存しています。すべてのリンクを上書きして、サイトが基本的にAJAXを介してのみ更新される単一のページになるようにすると、ユーザーがサイトをナビゲートする能力が制限され、また、ユーザーが見つけたものを共有できなくなります(これがポイントの一部ですよね?)。

あなたのサイトのユーザーのメンタルマップについて考えてみてください。ホームページからアクセスしたことを知っている場合は、何かを検索し、ゲームページにアクセスし、特定のゲームをプレイし始めました。これは、ユーザーが実行した4つの異なるアクションユニットです。彼らはこれらのページのそれぞれで他のいくつかのより小さく、より重要でない行動をしたかもしれません-しかしこれらは主要なユニットです。彼らが戻るボタンをクリックするとき、彼らは彼らが入った道を通って戻ることを期待するべきです。 AJAX呼び出しを介してこれらすべてのページをロードしている場合、ユーザーの期待に反して機能が実行されるサイトを提供していることになります。

サイトをすべての重要な機能(つまり、検索、ホーム、プロファイル、ゲームなど)に分割します。これは、サイトの内容によって決まります。これらのページにリンクする場所はどこでも、通常のリンクと静的URLを介してリンクします。

AJAXは問題ありません。しかし、それの芸術はそれをいつ使うべきか、そしていつ使わないべきかを知っています。上でスケッチしたモデルを維持すれば、ユーザーはそれを高く評価するでしょう。

26
Matt Howell

全体ではなく、更新が必要なページの一部にajaxを使用します。そのためには、テンプレートを使用する必要があります。

ページ上のさまざまな状態の変化に備えて戻るボタンを保持したい場合は、それらを#achorsと組み合わせて、URLを変更します(ブラウザーに別のGETを発行させることはありません)。

たとえば、Gmailは次のようになります。

mail.google.com/#inbox/message-1234

#を超えるものはすべて、ajaxを介して発生したページ状態の変更でした。 [戻る]を押すと、再び受信トレイに移動します(ここでも、別のブラウザーを使用せずにGETします)

34
Ben Scheirman

別の解決策:

AJAXページネーションと戻るボタン

これは、JQueryとMootoolsで動作する最高のもののようです。

5
Raspu

チェックアウト reallysimplehistory 。ウィキは10か月間更新されていませんが、私はちょうどAjax Experience 2008にいて、Brian Dillardによる プレゼンテーション を見ました。彼は0.8コードが彼のハードドライブにあると言います。うまくいけば、それはすぐにダウンロード可能になるでしょう。

5
Kevin Hakanson

ファンキーなJavascriptテクニックを使用してこの問題を解決する方法はたくさんあり、多くの場合iframeが関係していますが、この状況では、なぜAJAXを使用しているのか疑問に思う必要があると思います。それは実際にサイトをユーザーにとって使いやすくするつもりですか?あなたがそれを使っているように私には聞こえますが、それは実際にあなたの訪問者に何らかの価値を追加するからではなく、あなたはそれがクールだと思います(それ自体は必ずしも悪いことではありません)。通常のWebサイトから、通常のハイパーリンクされたドキュメントは、ほとんどの場合、プライマリナビゲーションに適しています。それは人々が期待することであり、私はあなたがいくつかの素晴らしい技術に基づいてそれらの期待を破ることを回避することをお勧めしません。

AJAXは素晴らしく、多くの素晴らしいことを実行できます。Webサイトのナビゲーションを変更することはその1つではありません。

しかし、この問題をうまく理解できたので、AJAXで、これについて考えさえしないサイトがたくさんあります。

2
roryf

このシンプルで軽量な PathJS libを試してください。リスナーをアンカーに直接バインドできます。

例:

Path.map("#/page").to(function(){
    alert('page!');
});
2

あなたが説明する理由から、AJAXはナビゲーションに最適なソリューションではありません。ブラウザのナビゲーションUIを壊す手間と比較して、ヘッダーとナビゲーションバーを再読み込みするためのヒットは最小限です。

AJAXのより適切な例は、ユーザーがナビゲーションペインで他のコンテンツのリストを参照しながら、メインウィンドウでゲームをプレイできるようにすることです。追加のアイテムをロードすることができます。ゲームプレイを妨げることなくAJAX経由のナビゲーションペイン。

1
Sal

単純なハイパーリンクを使い続けます。ページの家具がHTMLの大部分を占めるべきではないため、ページのリクエストから除外しても大きなメリットにはなりません。各リソースをアドレス可能にすること(つまり、ユーザーが関心を持つ可能性のあるコンテンツの各ビットのURL)は、Webの重要な設計機能です。これは、キャッシュが機能し、ユーザーがブックマークを共有できることを意味します。それはグーグルを機能させるだけでなく、ソーシャルブックマークサイトにもなります。

私の意見では、その後のページ変更からHTMLバイトを数バイト削減することは、努力する価値がありません。

0
Paul D. Waite