複数ページ対単一ページと目立たないJavaScript

Question

私はウィジェットの複数のカテゴリを持つサイトのセクションを持っています。各カテゴリ名のメニューがあります。 Javascriptを有効にしているユーザーは、カテゴリをクリックするとページ内のカテゴリの内容が表示されます。彼らは自由にカテゴリー間をクリックすることができ、必要に応じてDOMを更新します。 urlは、標準のhash/hashbang（Googleに優しい場合）を使用して更新されます。だから、example.com/widgetsのランド誰かのために、彼らはexample.com/widgets#oneにナビゲートすることができ、example.com/widgets#two、example.com/widgets#threeなど

しかし、Javascriptをせずにユーザーエージェントをサポートするために、これらのカテゴリのリンクの1つが表示されたカテゴリに新しいページをロードする必要があります以下、有効そうJavascriptを有効ずに誰かのために、彼らはexample.com/widgets/oneに移動します、example.com/widgets/two、example.com/widgets/threeなど

私の質問は：JavaScriptを使用して誰かは、これらのURLのいずれかに土地を有効にしたときにどうしますか？誰かがでJavaScriptを有効にするとはexample.com/widgets/oneに着くと表示されますか？彼らはexample.com/widgets#oneにリダイレクトされるべきですか？

Javascriptを有効にしている人には、1つのページ・サイト・エクスペリエンスが必要ですが、JavaScriptを使用しないユーザー・エージェント用のマルチページ・サイトが必要です。この事実に対処していないすべての回答は、その質問に答えません。私は、ハッシュバングやシングルページサイトとマルチページサイトのメリットや問題に興味はありません。

Answer 1

これは、私はそれを構築する方法をです。 JSプッシュステートブラウザは完全な正しいURLを取得し、JS非プッシュステートブラウザはハッシュされたURLを取得しました。 JS以外のユーザーは、ページの再読み込みを行うと通常どおり完全なURLに行きました。 、他のページへの すべてのクリックは、デフォルトのアクションを防ぐ機能によって処理されるHREFをつかみ、にURLを渡します。

彼らが持っている場合はJS：ユーザーがリンクをクリック

ajaxリクエストを送信し、URLを同時に更新します。そのajaxリクエストに対するhttpレスポンスが解析され、コンテンツエリアにロードされます。

非JS： ページが通常通りリフレッシュされ、ドキュメント全体が読み込まれます。

ページのロード：JSで

は：彼らのhrefのがAjaxを経由して扱われるように、デフォルトを防ぐために、すべてのリンクにイベントハンドラを接続します。

JSなし：何もありません。アンカーを正常に動作させる。

完全な正しいURLでコンテンツを利用できるようにし、ajax経由でコンテンツを読み込み、コンテンツを取得したアドレスを反映するようにURLを更新する必要があります。そうすれば、JSが実行されていないときは、何も変更する必要はありません。

それはどういう意味ですか？

Answer 2

なぜ別のページにリダイレクトする必要がありますか。ユーザーは、そのページに到着して答えを探しました。彼はjavascriptを有効にしても答えが得られます。それは問題ではありません。ユーザーのクエリが実行されました。

しかし、ユーザーがexample.com/widgets#oneにいるとどうなりますか？その場合、example.com/widgets/oneへの自動リダイレクトを設定する必要があります。これは、onloadイベントでjavascriptが有効になっているかどうかをチェックし、適切なページにリダイレクトすることで実行できます。

Answer 3

明らかにあなたの質問には答えが含まれています。あなたは言う：

が、私はそれから頼む

とのJavascriptを有効にする必要が誰のための単一のページサイトの経験を必要とする：JavaScriptを使用して誰かがexample.com/widgets/oneに着陸する際に提示する有効にする必要があり何

例えば？彼らはexample.com/widgets#oneにリダイレクトされるべきですか？

私はと言っています。彼らはにリダイレクトされます。私はあなたの要件（そしてJavaScript機能とURLのハッシュフラグメントに関する情報がサーバー側で利用できないという事実を考慮して、他のオプションは見当たりません）。

---

要件を少し緩和することができる場合は、別のオプションが表示されます。ウェブがフレームセットでいっぱいになったときを覚えていて、AltaVista経由で特定のフレームに着陸しました（Googleはまだありませんでした！）。ページがフレームとして表示されるはずのヘッダーと、ユーザーをフレームセットバージョンにするリンクを見るのが一般的でした。

同様のことが可能です：スクリプトが利用可能な場合は、example.com/widgets/oneにいることを検出して、シングルページ版へのリンクを追加します。私はそれが理想的ではないことは承知していますが、何よりも優れています。クライアント側のリダイレクトよりも優れています。

Answer 4

このようなページを設計する1つの方法は、JavaScriptを使わずにデザインすることです。あなたはとてもページにアンカーを使用することができます

：

example.com/widgets#one 

は、あなたのページではJavaScriptなしで動作したら、あなたはjavascriptの層を追加したIDを持つ要素へのリンク「1」

なります。 event.preventDefaultを使用すると、リンクが続くのを防ぐことができます。

（https://developer.mozilla.org/fr/docs/DOM/event.preventDefault）です。次に、必要なjavascript機能を追加します。

使用HistoryJS URLを管理するために：