1

質問...ユーザーがリンクやブックマークなどを共有できるように、ディープ リンク (クリックすると、ユーザーが読み込んでいる場所への URL が変更される) を持つ 1 ページの Web アプリを構築したいと考えています。

jQuery BBQ プラグインの問題は、href に href="#/photos/1" のようなハッシュを含める必要があることです。

つまり、アプリ内のすべての URL がハッシュで始まることを確認する必要があります。また、URL はすべてハッシュ化されているため、非 JS ブラウザーは機能しません。

JS および非 JS ブラウザーでシームレスに動作し、コードの変更が少なくて済む、ディープ リンクを備えた 1 ページの Web アプリを実現するエレガントな方法はありますか?

ありがとう

4

1 に答える 1

2

JS と非 JS 対応/有効なブラウザーの両方で機能する単一の URL 構造を使用する場合は、ブラウザーが JS をサポートしているかどうかを確認し、それに応じてナビゲーション リンクを変更できます。ブラウザーが JS をサポートしている/有効にしている場合は、ハッシュを追加し、 を使用してページを取得しますwindow.location.hash。URL の例:

site.com/#photos/1

JS をサポートしていない場合、URL は次のようになります。

site.com/photos/1

#この方法では、URLに を追加するだけです。これは、スクリプト自体で行うか、ページが読み込まれた後に jQuery を使用してページ上のリンクを変更することで簡単に行うことができます。(Apache/PHP を想定) Apache の ModRewrite を使用して、URL を次のように書き換えることができます。

site.com/index.php?p=photos&show=1

サイトが初めてロードされ、ブラウザーが JS をサポートしていないとします。(この場合は) "page" 変数と "show" 変数に応じて、通常の方法でロードする必要があるものをロードします。JS をサポートしている場合は、次のように変数を格納できます。

<div style="display:none;" id="page">photos</div>
<div style="display:none;" id="show">1</div>
<div id="content"></div>

ページが読み込まれた後、jQuery を起動してナビゲーション データを抽出します。

var page = $('#page').html();
var show = $('#show').html();

正しいページを表示するために必要なことは何でも行います。

新しいリンクをクリックすると、ハッシュ ナビゲーションにさまざまな jQuery プラグインを使用できます。または、JS がなく、リンクにハッシュがない場合、ページは通常の方法でロードされます。

コードの重複を防ぐには、通常の方法とjQuery を介して簡単に表示できるようにページを設定する必要があります。この写真ページがあるとします。JS を使用せずにブラウジングするときに「photos.php」を含め、jQuery を使用して同じファイルを使用できます。

$.get(page + '.php', {
  show: show
}, function(data) {
  $('#content').html(data);
});

「photos.php」はまったく同じ$_GET変数を参照するため、出力は同じになります。

ただし、多少のオーバーラップが発生します。たとえば、フォームを表示/投稿する場合は、jQuery を介してこれを処理する場合とは対照的に、おそらく通常の方法とは異なる方法で処理します。通常の方法でフォーム データを処理し、更新されたページを表示します。したがって、「photos.php」の場合は、完全な出力が必要になります。しかし、jQuery を使用する場合は、「完了」などの結果のみが必要で、ページを完全にリロードせずにページを変更します。$.getこれは、 (または$.post) 関数にさらにいくつかの変数を追加することで解決できます。

(PHP) MVC フレームワークを調べることができます。MVC セットアップを使用すると、サイトのすべてのロジック (ナビゲーション/データベース クエリなど) をビュー (つまり、サイトに表示されるもの) から分離できます。これにより、同じロジックを使用するのが非常に簡単になりますが、この場合は、通常のサイトと jQuery ベースのナビゲーションを使用するサイトの別のビューになります。

最後に、このすべての問題を経験する価値があるかどうかを自問する必要があります。誰のためのサイトですか？これらの人々は本当に JavaScript なしでブラウザーを使用していますか? JS に依存しないサイトを利用できるようにすることは本当に必要ですか? 今日では、ほとんどの人が JS を問題なく処理できるブラウザを使用しており、「セキュリティ上の理由」で JS を無効にする時代はとうに過ぎています。サイトの両方のバージョンを維持するには、多くの時間とリソースが必要になる可能性があり (もちろんサイズによって異なります)、それだけの価値はないかもしれません。その場合、完全に機能するサイトを使用するには、ユーザーが 21 世紀に足を踏み入れる必要があることを示すメッセージまたは簡素化された簡略化されたサイトを表示する方が簡単です。

于 2010-10-04T23:24:25.743 に答える