AJAX アプリのアドレス バー URL を現在の状態に一致するように変更する
https://stackoverflow.com/questions/1457
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は AJAX アプリを作成していますが、ユーザーがアプリ内を移動すると、ページがリロードされなくてもアドレス バーの URL が更新されるようにしたいと考えています。基本的には、いつでもブックマークして現在の状態に戻せるようにしたいと考えています。
AJAX アプリで RESTful 性を維持することに人々はどのように取り組んでいますか?
解決
これを行う方法は操作することです location.hash AJAX の更新によって状態が変化し、目立たない URL が必要な場合。たとえば、ページの URL が次の場合:
クライアント側関数がこのコードを実行すると、次のようになります。
// AJAX code to display the "foo" state goes here.
location.hash = 'foo';
その後、ブラウザに表示される URL は次のように更新されます。
これにより、ユーザーはページの「foo」状態をブックマークし、ブラウザ履歴を使用して状態間を移動できるようになります。
このメカニズムを導入すると、フラグメント識別子 (# の後の部分) がクライアント側に送信されないため、クライアント側で JavaScript を使用して URL のハッシュ部分を解析し、適切な初期状態を作成して表示する必要があります。サーバ。
Ben Alman のハッシュチェンジ プラグイン jQuery を使用している場合、後者は簡単です。
他のヒント
book.cakephp.org などのサイトを見てください。このサイトは、ハッシュを使用せずに URL を変更し、AJAX を使用します。それが正確にどのように行われるのかはわかりませんが、それを理解しようとしてきました。知っている人がいたら教えてください。
特定のプロジェクト内でのナビゲーションを見る場合は、github.com も参照してください。
Ajax を使用している場合、作成者が訪問者をリロードしたりリダイレクトしたりすることは考えられません。しかし、なぜ HTML5 を使用しないのでしょうか pushState/replaceState?
アドレスバーは好きなだけ変更できます。 AJAX を使用して、自然な見た目の URL を取得します。
私の最新プロジェクトのコードをチェックしてください。http://iesus.se/
これはケビンの言ったことと同じです。クライアントの状態を JavaScript オブジェクトとして持つことができ、その状態を保存する場合は、(JSON と Base64 エンコーディングを使用して) オブジェクトをシリアル化します。その後、href のフラグメントをこの文字列に設定できます。
var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;
document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history
最初の方法では、新しい状態を新しい場所として扱います (そのため、「戻る」ボタンを押すと前の場所に戻ります)。後者はそうではありません。
SWFAddress は Flash および Javascript プロジェクトで動作し、ブックマーク可能な URL を作成したり (上記のハッシュ メソッドを使用して)、戻るボタンのサポートを提供したりできます。
window.location.hash メソッドが推奨される方法です。やり方の説明としては、Ajax パターン - 固有の URL.
YUI には、このパターンがモジュールとして実装されており、ハッシュを使用してアドレスを書き換えるとともに、戻るボタンを機能させるための IE 固有の回避策が含まれています。 YUI ブラウザ履歴マネージャー.
他のフレームワークにも同様の実装があります。重要な点は、アドレスの書き換えとともに履歴を機能させたい場合、ブラウザーごとに履歴を処理する方法が異なる必要があるということです。(これについては、最初のリンクの記事で詳しく説明されています。)
IE には iframe ベースのハックが必要ですが、Firefox は同じ方法を使用して二重履歴を生成します。
OP またはその他のブラウザーの履歴を変更して状態を有効にする方法をまだ探している場合は、IESUS が提案している PushState と replaceState を使用するのが、現時点での「正しい」方法です。location.hash に対する主な利点は、ハッシュだけではなく実際の URL を作成することのようです。ハッシュを使用したブラウザ履歴が保存され、JavaScript を無効にして再度アクセスすると、ハッシュがサーバーに送信されないため、アプリは動作しません。ただし、pushState が使用されている場合は、ルート全体がサーバーに送信され、ルートに適切に応答するようにサーバーを構築できます。同じ口ひげテンプレートがサーバー側とクライアント側の両方で使用されている例を見ました。クライアントで JavaScript が有効になっている場合、サーバーとの往復を回避することで機敏な応答が得られますが、アプリは JavaScript なしでも完全に正常に動作します。したがって、JavaScript が存在しない場合、アプリは正常に機能を低下させる可能性があります。
また、history.js のような名前のフレームワークも存在すると思います。HTML5 をサポートするブラウザの場合は、pushState を使用しますが、ブラウザがそれをサポートしていない場合は、自動的にハッシュの使用に戻ります。
ユーザーがページ内にいるかどうかを確認します。URL バーをクリックすると、JavaScript によってページ外にいると表示されます。URL バーを変更し、その中の記号「#」を使用して「ENTER」を押すと、マウス カーソルでページを手動でクリックせずに、再度ページに移動すると、JavaScript からのキーボード イベント コマンド (document.onkeypress) が実行されます。リダイレクト用の JavaScript が入力されてアクティブになっているかどうかを確認できます。ユーザーがページ内にいるかどうかは window.onfocus で確認でき、ユーザーがページ外にいるかどうかは window.onblur で確認できます。
はい、可能です。
;)
