ajax - 追加 - js location




AJAXアプリのアドレスバーのURLを現在の状態に合わせて変更する (6)

私はAJAXアプリを書いていますが、ユーザーがアプリを移動するにつれて、ページのリロードがないにもかかわらずアドレスバーのURLを更新したいと思います。 基本的に、私は彼らがいつでもブックマークしてそれによって現在の状態に戻ることができることを望みます。

AJAXアプリでRESTfulnessを維持するための処理方法


Ajaxを使用しているときに、作家が自分の訪問者をリロードまたはリダイレクトしたいとは思わないでしょう。 しかし、なぜHTML5の pushState / replaceState ないのですか?

アドレスバーは自由に変更できます。 AJAXで、自然に見えるURLを取得します。

私の最新プロジェクトのコードをチェックしてください http://iesus.se/ : http://iesus.se/


OPや他の人がまだ状態を有効にするためにブラウザの履歴を変更する方法を探しているのであれば、IESUSによって示唆されているように、pushStateとreplaceStateを使うことが今それを行うための「正しい」方法です。 location.hashよりも大きな利点は、ハッシュだけでなく実際のURLを作成することです。 ハッシュを使用したブラウザの履歴を保存した後、JavaScriptを無効にして再度アクセスすると、ハッシュがサーバーに送信されないため、アプリは機能しません。 ただし、pushStateが使用されている場合は、ルート全体がサーバーに送信されます。その後、サーバーはルートに適切に応答するように構築できます。 同じ口ひげテンプレートがサーバー側とクライアント側の両方で使用されている例を見ました。 クライアントがJavascriptを有効にしている場合、彼はサーバーへのラウンドトリップを回避することで気の利いた応答を得ますが、アプリはJavascriptがなくても問題なく動作します。 このように、アプリはJavascriptがないと適切に劣化する可能性があります。

また、history.jsのような名前のフレームワークがあると思います。 HTML5をサポートするブラウザの場合はpushStateを使用しますが、ブラウザがそれをサポートしない場合は、自動的にハッシュの使用にフォールバックします。


book.cakephp.orgのようなサイトを見てください。 このサイトはハッシュを使わずにURLを変更し、AJAXを使います。 それがどのように正確に行われるかはわかりませんが、把握しようとしています。 誰か知っているなら、私に知らせてください。

特定のプロジェクト内のナビゲーションを見ているときにもgithub.com。


window.location.hashメソッドは物事を進めるための好ましい方法です。 その方法の説明については、 ajaxpatterns.org/Unique_URLs

YUIはこのパターンをモジュールとして実装しています。これには、ハッシュを使用してアドレスを書き換えると同時に戻るボタンを機能させるためのIE固有の回避策が含まれています。 由井ブラウザ履歴マネージャ

他のフレームワークも同様の実装をしています。 重要な点は、住所を書き換えることと一緒に履歴を処理したい場合、ブラウザごとにそれを処理する方法が異なることです。 (これは最初のリンク記事で詳しく説明されています。)

IEはiframeベースのハックを必要とし、Firefoxは同じ方法で二重の歴史を作り出すでしょう。


これを行う方法は、AJAXの更新によって、あなたが控えめなURLにしたいという状態変化をもたらしたときに location.hash を操作することです。 たとえば、あなたのページのURLが

http://example.com/

クライアント側の関数がこのコードを実行した場合:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

その後、ブラウザに表示されるURLは次のように更新されます。

http://example.com/#foo

これにより、ユーザーはページの "foo"状態をブックマークし、ブラウザの履歴を使用して状態間を移動できます。

適切な初期状態を作成して表示するには、このメカニズムを使用してクライアント側でURLのハッシュ部分を解析し、フラグメント識別子(#の後の部分)が送信されないようにする必要があります。サーバ。

あなたがjQueryを使っているなら Ben Almanのhashchangeプラグイン は後者を簡単にします。


ユーザーがページ内にいるかどうかを確認します。URLバーをクリックすると、Javascriptによってページ外になったと表示されます。 URLバーを変更して、その中に記号「#」を付けて「ENTER」を押すと、マウスカーソルでページを手動でクリックせずに再びページに移動します。それがリダイレクトのためにJavaScriptを入力してアクティブにしているかどうかをチェックすることができます。 あなたはユーザーがwindow.onfocusでページに入っているかどうかをチェックし、彼がwindow.onblurで出ているかどうかをチェックできます。

ええ、それは可能です。

;)





address-bar