AJAXサイトでのハッシュナビゲーション

遅かれ早かれajaxサイトを構築している場合、「ブラウザーの前後ボタンが機能しない」という問題が発生します。 ajaxは非同期であるため、他のページに移動するのではなく、現在のページのコンテンツの一部を変更するだけです。



すべての開発者が苦労している2番目の問題は、プロダクションに渡す前のプロジェクトがjavascript(ajax)コードの山であふれていることです。 このコードはすべて、基本的には「テンプレートなし」の北からのページリクエスト、つまりページの純粋なコンテンツです。



最初の問題がユーザーの問題である場合、2番目の問題は開発者の問題です。 以下では、両方のタスクが非常にエレガントな方法でどのように解決されるかを説明しようとします。 非常によく似た手法を使用して、facebookとtwitterへのリンクが作成されます。



もちろん、開発者はajaxについて考えないように望んでいますが、彼のプロジェクトは完全なajaxであることが判明しました:-)



 <a href="/contacts/">Contacts</a>
      
      







その後、自動的にajaxに置き換えられます。 ただし、ajax / not_ajaxを制御するには、コード内のすべてのリンクに特別なクラスを追加することをお勧めします。次に例を示します。



 <a href="/contacts/" class="EngineAJAX">Contacts</a>
      
      







DOMモデル(dom:loadedイベント)をロードした後、すべてのリンクを見つける必要があります-それらからEngineAJAXクラスを削除し、href "#!"に追加します。 その結果、リンクは次の形式になります。



 <a href="#!/contacts/">Contacts</a>
      
      







つまり、リンクは「アンカー」になりました。 このようなリンクをクリックすると、ブラウザーはページをオーバーロードしませんが、指定されたIDを持つ要素を見つけて、その上に配置しようとします。

この種のリンクに切り替えるときは、ajaxリクエストを実行する必要があることは明らかだと思います。 残念ながら、document.location.hashのonChangeイベントをキャッチすることは不可能です。そのため、onClickハンドラーはドキュメント全体でハングアップし、クリックされた要素を「聞く」必要があります。



パズルの半分は解決されています。リンクをクリックすると、アンカーへの移行が実行され、クリックがキャッチされ、ajaxが実行されます。 ボタンを前後にブラウザで機能させるには、document.location.hashが変更されているかどうかを永続的なサイクルでチェックし、変更されている場合はajaxリクエストを実行する必要があります。 ユーザーの問題#1は解決されました。



次に、問題#2について、またはサーバーから「純粋なページコンテンツ」を取得する同じajax'eについて少し説明します。 それはすべて、使用しているエンジンまたはCMSに依存します。 どんな形であれ、あなたにとって心地よいエンジンでは、この可能性を追加する必要があります。特定のパラメーターが渡された場合(たとえば、GET parameter notemplate = 1)、エンジンは「テンプレートなし」ページのコンテンツを返します。 つまり、上記の例では、ajaxリクエストはURLにヒットするだけです。



/contacts/?notemplate=1







したがって、問題1と2はほぼ解決されています。 ほとんど問題#3が現れたためです:ajaxを実行した後、ドキュメント全体のhtmlコードが変更され、EngineAJAXクラスとの新しいリンクが表示される場合があり、「アンカー」への変換が必要です。 この問題は、dom:changedなどのイベントが存在しないという事実によって悪化します。 私が思いついた唯一の「額」オプションは、bodyタグのコンテンツ(+1の永久ループ)が変更されたかどうかを毎秒10回チェックすることでした。処理されたリンクからのEngineAJAX-それらを再度たどらないため。



PS:jQueryにはonHashChangedイベントがあり、onDomChangedのように見えますが、jQueryでは、そのようなイベントをキャッチすることは依然として永続的なサイクルになります。



All Articles