2011-08-15 7 views
13

はしかし、私は1つの質問があります。どのようにしてページの更新を処理できますか?History.pushStateとページの更新

例えばユーザが

が非同期

はhistory.pushState(とURLを変更するページのコンテンツをロードするJS関数によって処理されたリンクを、クリック)

ユーザーは、ページをリフレッシュし、もちろんのURLは、あなたがこのような状況に対処するにはどうすればよいのサーバ

上に存在しないのですか?ハッシュソリューションにより何ら問題はあり

おかげ

答えて

2
あなたはコピーのためのサーバー側のリダイレクトを実行する必要が

と貼り付けた偽のURL それはすべてあなたが使っているものを、サーバーサイドの技術に依存しています。 JavaScriptの方法はありませんが、良い解決策ではない着信URLに基​​づいてユーザーをリダイレクトするあなたの404ページにクレイジーな機能を書き込んでください。

+1

したがって、リクエストがajaxかフルページかに基づいてリクエストを処理するには、サーバー側が必要です。それらがajaxの場合はページの一部だけを返し、そうでない場合はドキュメント全体を返します。正しい? – Thomas

+0

はい、良いシナリオのようです。ほとんどの人はblah.com/dir/page/ajax/condition/conditionを使用していますので、 "ページ"にリダイレクトしたり、さらにはあなたのajaxに電話をかけたり、条件をあなたのajaxに適用することもできます。それはあなたのウェブアプリに依存します – Mohsen

1

ユーザーがページをリフレッシュし、もちろんのURLは、あなたが何を意味するか、サーバー

に 存在しませんありませんでしたこの?あなたの前提が間違っていると感じています。 実際には、ポイントは、(サーバーサイドまたはクライアントサイドの)url-to-pagestate対応の実装を提供する開発者です。

場合は、もう一度、私は質問が権利を取得しました。

+0

こんにちは。つまり、URLが存在しないため、ページの更新をどのように処理するかということです。このサーバー側を処理する必要がありますか?しかし、私はこれが少し生産的であると感じています。もちろん私が何かを逃していないならば、 – Thomas

+0

@トーマス、よろしくお願いします。あなたがdivを持つページを持っていると言うと、そのdivをクリックしていると、それは高さの変化です。このイベントをURLに反映させたいと考えています。まず、高さを変更してから何らかの形で(ハッシュ、プッシュステート)URLを変更できるという2つのオプションがあります。または、私たちはURLを変更することができます。何とかURLが変更されたことを追跡し、divの高さを変更します。正確にどのアプローチについて話していますか? – shabunc

5

これは、サーバー側のサポートが必要です。 .pushStateの理想的な使用法は、JavaScriptアプリケーションからのURLをサーバーがインテリジェントに処理できるようにすることです。

これは、同じJavaScriptアプリケーションを再提供し、window.locationを検査させるか、通常のWebアプリケーションの場合と同じようにサーバー上のそのURLのコンテンツをレンダリングするかのいずれかです。具体的な内容は、あなたがやっていることによって明らかに異なります。

0

あなたは、サーバー上のASP.NET MVCを使用している場合、あなたはあなたのRegisterRoutes関数に以下を追加することができます。

 routes.MapRoute(
      name: "Default", 
      url: "{*url}", 
      defaults: new { controller = "Home", action = "Index" } 
     ); 

これはあなたにHomeControllerのIndexアクションにすべての要求を送信すると、あなたのUIを処理します実際のルート。 JS-唯一の解決策を探している人のために

0

windowpopstateイベントを使用します。完全な詳細についてはMDN - popstateを参照して、本質的にこのイベントはあなたがpushStateまたはreplaceStateに与えた状態オブジェクトが渡されます。 event.stateのようにこのオブジェクトにアクセスして、そのデータを使って何をすべきかを判断します。つまり、ページのAJAX部分を表示します。

これが2011年に利用できなかったかどうかはわかりませんが、現在のすべての最新のブラウザ(IE10 +)で利用可能です。