問題タブ [html5-history]

私は HTML5 history API について読んでいますが、これまでのところ、仕組みをコードで示す単純な動作デモは見つかりませんでした。

ここに動作するjsfiddleがあります: 4 つのボタンと 4 つの div。ユーザーがボタンを押すと、対応するパネルが表示されます。

私がやろうとしていることは次のとおりです。

history.js プラグインがあることは知っていますが、API が最も単純な形でどのように機能するかを理解したいと思っています。

jsfiddle が、コードのデモを探してこのページに来る他の人に役立つことを願っています。

ありがとう。

基本的にヘッダー、フッター、ボディビューを持つWebアプリケーションがあります。history.jsライブラリとHTML5プッシュステートを使用してWebサイトの調整に取り組んでいますが、発生している問題の1つは、JavaScriptがDOMに挿入されたときに埋め込みJavaScriptを実行することです。

ほとんどすべてのJavaScriptはjQuery（function（）{...}）（ドキュメントオンレディローダー）でラップされています

誰かがこれに対処するための良い戦略を知っていますか？ありがとう！

次のようなものを作成したい：http ：//www.atlassian.com/software/jira/overview

（機能ツアーセクションのタブをクリックするとURLが変化するのを参照してください）

これはHTML5の履歴APIで実現できることを知っています。私の質問は、同じページの複数のコピーを作成する必要があるかどうかです。これにより、URLがアドレスバーに直接入力されたときに正常に機能するようになります。または、URLのような他の可能な方法がありますか。これを達成するために書き直すか何か？

history.backin javascript が機能しません。このような。

私のシナリオ:

リクエストpage1 > page2 > page3 > page4

page4(redirect to) >で処理をpage2行っていますが、page2リダイレクト先に戻るボタンが必要page1です。

質問

これをどのように実装しますか？

この問題を検索できるキーワードは何ですか?

メソッドのブラウザー サポートを見つけることができますがpushState、ブラウザーのすべてのバージョンが実際にpopstateイベントで状態オブジェクトを渡すとは限りません。ブラウザがサポートしている場合に使用できると期待できるものpushStateですか？

サイトの最初の「ランディング」ステージに背景画像と非常に最小限のコンテンツが含まれている Web サイト用の「ポータル」タイプのページを作成していますが、「私たちについて」というタイトルのリンクをクリックすると、ページをロードする AJAX コマンドが起動されます ' about.php」を「MoreDiv」と呼ばれる DIV に変換します。さらに、「MoreDiv」を表示するように設定するために JavaScript コマンドが起動され、同時に最初のテキスト div (「phototext」と呼ばれる) と「bottomlinks」と呼ばれる追加の div が非表示になります。ファイル 'about.php' には、AJAX を呼び出して 'InnerContent' と呼ばれる別の Div 内のコンテンツをロードするリンクのリストが含まれています...この div は 'MoreDiv' 内にあるため、リンクのリストは所定の位置に残り、下部のみページの一部が変更されます。リンクのリスト内に「ホームに戻る」があります

ページは PHP ファイルであり、表示された URL を直接入力すると、それぞれの Div に読み込まれた正しいサブページを含むページが読み込まれるため、 history.pushstate を使用して URL を希望どおりに表示しました。

私が今抱えている問題は、 history.popstate を使用してこれらのバリエーションをブラウザー履歴のページに保存し、ブラウザーの戻るボタンをクリックすると Div の内容が変更されるようにする方法です....

Javascript:

そして、ページには次の HTML が含まれています (メイン ページと about.php がそれぞれマークされています)。

これがページの基本的なセットアップです (スペースを埋めるためだけにテキストが挿入されます)...どうすれば history.popstate を機能させて、現在の javascript/AJAX ベースのリンクを維持しながら、履歴状態に基づくそれぞれの DIV のコンテンツ (および可視性)? ありがとう。

（ps。さらに、「ホームに戻る」リンクを使用して、history.pushstate を使用して URL に加えられた変更をリセットできるようにしたいと考えています...現在、URL を変更しても何もできないためです。 "?home=y" を追加する)

私はjQueryUI Auto-complete自分のサイトで使用していwindow.history.pushStateます。これは、ページを更新せずにブラウザの URL を変更するものです。それは完全に機能しますChromeがMozilla、残念ながら、私が望んでいた方法では機能しませんInternet Explorer 9。状況は次のとおりです。私のページのタグを使用しjQueryUI Auto-completeて、地域、郡、および郵便番号を検索できます。<input />次に、オートコンプリートの提案された結果のいずれかをクリックすると、ブラウザの URL を使用して、ページを更新せずにto にwindow.history.pushState変更されます。今私が言ったように、それは動作しますが、失敗します。www.example.com/siteswww.example.com/sites/selected_regionChromeMozillaIE9jQueryUI Auto-complete、 browser-url を変更することも、提案のリストを閉じることもありません。絶対にサポートしませんwindow.histoty.pushState。そこで、 を使用して機能する可能性のある解決策を検索して見つけましたhistory.js。指示に従ってサーバーにアップロードし、ファイルを含めましたが、使用されhistory.jsている他のファイルと競合することがわかりました.js。どうすればこれを修正できますか? 前もって感謝します。

PS：これが私の使い方ですwindow.history.pushState

可能な限り私を修正してください。乾杯。

Firefox v15.0.1のローカルサイトで要求しているURIの以下の例がありますが、簡潔にするためにホスト名を削除しました。

いくつかのページングリンクは、次のようなhrefで結果のページに表示されます

https://github.com/browserstate/History.js/を使用しているクリックイベントで以下の履歴リクエストを実行します。これは、私が知っている状態からの状態変化のためにHTML5履歴を使用します。

url History.getState（）。urlは私に以下を与えます、これはクリックイベントで非同期関数に渡されます：

そして、履歴はブラウザのURIをこれに合わせて調整しています

「cat」パラメータが正しくないため、非同期アクションが失敗します。

getState（）。urlの結果全体をURLエンコードすることはできません。これは、正しくないためです。

このような状況に直面したときにやらなければならないことが欠けていることはありますか？

どんな助けでもいただければ幸いです。ありがとう。

更新： 私は現在これをデバッグしていて、getState（）関数が返すオブジェクトを調べています。正しくエンコードされたパラメーターを含む「data」オブジェクトプロパティがあります。

スピンして、ajaxリクエストを行う関数に渡すURLに追加することもできますが（.urlプロパティを渡す代わりに）、Historyがハッシュを処理することを意図している場合、これは良い考えとは思えません。 HTML4のURLフォールバック。

次のコードは、ページのコンテンツを動的に変更しながら、状態オブジェクトに新しい URL をプッシュし続けます。ただし、Backボタンを押し始めて元のページに戻ると、元のコンテンツは表示されず、代わりに次のページのコンテンツが保持されます。どうすれば達成できますか？