2

HTML5履歴APIを学習しています。以下は私が達成できたことです。

すべてのコンテンツと「b.html」へのリンクを含むページ「a.html」があります。リンクをクリックすると、画像が変わることを除いて、ほとんどすべてのコンテンツが同じままです。そこで、クリック ハンドラーを作成し、"b.html" の読み込みを回避します [実際には、b.html はサーバーに存在しません]。私は XMLHTTPRequest を作成し、置き換える必要のあるコンテンツのみをフェッチし (ファイル呼び出し "xmlres.html" に配置され、img タグが 1 つだけ含まれています)、pushstate() を使用して URL を更新します。

すべて正常に動作します。しかし問題は、ユーザーが現在の URL "appname/b.html" をコピーして別のページで開こうとすると、"b.html" を作成していないため、リソースが見つからないことです。完全なコンテンツを含む b.html を再度作成したくありません。この問題を解決するための回避策はありますか。

URL のイベント リスナーを作成する必要がありますか、またはどのように処理すればよいですか。これに関する洞察は大きな助けになるでしょう。

4

2 に答える 2

2

I think you're talking about single page applications, commonly known as SPA.

Basically what this concept means is you have let's say an index.html and inside that you have a section of each page defaulted to be hidden and via javascript and rest oriented services managing and handling the content of each section based on the users interaction.

The single page applications are well known by using hashtag for navigation, in the provided fiddle this is done with the hash symbol.

You can easily access the hash value via this property:

console.log(window.location.hash);

Here is a fiddle I made, The page transitions are fully functional, give me a bit to include history api functionality.

Here is what this fiddle does:

  • If you access the base url it will display the index section.
  • If you access via url to the base url it will display the index section.
  • If you access /1#sectionname if that section is available it will show it, otherwise it will show you that the section you've tried to reach is not available, so it will show a not found message.
  • History api support via jQuery.
  • Navigation through the footer links.

Please be patient as I add history functionality and let me know if you need further details.

Here is the wikipedia page for Single Page Applications in case you want to read a bit more.

EDIT:

I've also made a blog post about it

Hope it helps!

于 2013-05-18T21:15:51.807 に答える
0

あなたが経験している現象を説明する記事があります (記事の下部にあります): http://www.sitepoint.com/an-overview-and-usage-of-javascript-history-api/

基本的に、これは、404 URL が直接要求されたときに何をすべきかを理解する特別なサーバー機能を持つことになります。参照されている記事では、PHP を使用してこれを行う方法を示しています。Node、Vertx、Servlet Spec'd サーバーなどの他のアプリケーション サーバーはすべて、URL 処理への特別なアクセスを提供します。これにより、404 が発生するかどうかを判断し、404 になる場合に特別な制御を行うことができます。話されていない履歴 API の特殊なケース。それが原因で発生する可能性のある追加の問題がいくつかあります。たとえば、この手法を使用する場合でも、物理リソースと SPA リソースが存在しない場合に 404 を提供することをお勧めします。仮想リソースは、履歴 API/URL ルーティングが SPA コードベース内で行われると表示されるページです。

于 2015-07-27T19:37:11.560 に答える