問題タブ [html5-history]

私は history.js を使用しており、URL が変更されたときに ajax 経由でコンテンツを呼び出したいと考えています。私はそれを機能させていますが、問題は、状態が変化したときに読み込まれる URL に応じて、ページの応答が異なる必要があることです。たとえば、ローカル スコープ内では、右側のナビゲーションの URL に関連するページを、その隣のコンテンツ エリアにロードする必要があります。URL が現在のセクション外のスコープに変更された場合、ajax 呼び出しで、右側のナビゲーションを含むセクション全体を含むコンテナーにページをロードする必要があります。history.js を使用して URL に確実に異なる応答をするにはどうすればよいですか?

例：

右側のナビゲーション項目がクリックされたときに URL を変更するコードがいくつかあります。

...そして、URL が変更されたときに別のコンテンツをロードするコード:

onstatechangeしかし、新しい URL がこのサブセクションの外にある場合に、イベント ハンドラーの反応を変えたい場合はどうすればよいでしょうか? 新しい URL が原因で AJAX リクエストが に属さないコンテンツを取得するのでは$('#primary-content').html()なく、それを置き換えたい場合はどうすればよいですか?:$('#sub-content').html()$('#sub-content')

基本的な HTML:

URL がwww.example.com/sub-section/page.htmlに変更された場合

URL がwww.example.com/page.htmlに変更された場合

を使用して、URL が別のセクションに移動するタイミングを安全に判断するにはどうすればよいでしょhistory.jsうか? その変化にどのように反応しますか？

BackboneのHTML5履歴オプションを使用するWebアプリに取り組んでいます。クライアントとサーバーですべてをコーディングする必要をなくすために、このメソッドを使用してすべてのリクエストをindex.htmlにルーティングしています。

Twitterカードをこの設定で動作させる方法があるかどうか疑問に思っていました。現在、すべてがJavascriptで動的に読み込まれるため、ページを読み取ることができないためです。

ユーザーエージェントを使用して、それがTwitterBotであるかどうかを検出し、そうである場合は、必要なメタタグを使用して静的バージョンのページを提供することを考えていました。これは機能しますか？

ありがとう。

を使用して、現在選択されているタブのインデックスを作成しようとしています

プログラムでjquery uiタブを切り替えるjqueryのpopstateイベントへのハンドラがあります。

これは正常に機能し、ブラウザと戻るボタンと進むボタンを使用してタブを切り替えることができます。2 層のタブでも機能します。

しかし、場合によっては、追加の状態をスタックにプッシュしたいことがあります。だから私は次のことをします：

履歴にプッシュする前後のコンテンツは見栄えがします。console.log(history.state); で確認。また、Chromeコンソールでチェックしてみました。

しかし、私の popstate ハンドラーでは、オブジェクト event.originalEvent.state の targetId、tabSelected 属性が表示されません。オブジェクトの tabSelected の正しい値が表示されていますが、何らかの理由でトリミングされた状態になっています。

Chrome と Firefox の両方でチェックインしました。正しいコンテンツを取得できません。何が間違っている可能性がありますか？前もって感謝します。

アップデート

また、すべてのプッシュステートでグローバル変数をインクリメントして、それを状態に追加しようとしました。私が言及している特定のケースでは、グローバル変数の値が 49 ではなく 48 になり、最後から 2 つ後のイベントを取得していることがわかります。popstate ハンドラーがその間に呼び出されていません。何が起こっているのかわかりません。

別のアップデート

history.pushState(content, null, "") を 2 回呼び出すと、正常に動作します。（ある場所でのみ、他の場所ではまだ一度呼び出しています）。何らかの理由で、ブラウザが最後から 2 つ目の状態を返しているようです。この回避策はクロムとFirefoxの両方で機能するため、コードに問題があるようです。

私は AJAX を使用するツールを構築していpushStateます。基本的に、これは実際の HTML リンクのリストを返す検索ツールです (リンクをクリックするとツールが終了します)。replaceState

onpopstateによって作成されたクエリ履歴をユーザーがナビゲートできるように使用していますpushState。このイベントは、実際のリンク (作成されたのではなく、実際のブラウザー ナビゲーションによって作成されたリンク) から戻ったときにも発生します。ここで炎上させたくない。pushState

onpopstateでは、私の質問は次のとおりです。履歴アイテムからのイベントpushStateと実際のナビゲーションからのイベントの違いをどのように見分けることができますか?

私はこのようなことをしたい:

onpopstate ハンドラー - ajax 戻るボタンを試しましたが、運がありません:(

前もって感謝します！

編集: ここでの問題は、さまざまなブラウザーがonpopstateイベントを処理する方法です。これが起こっているようです：

クロム

• 実際のイベントと仮想イベントのonpopstate両方で発生します
• 実際にJavaScriptを再実行します（設定loaded=falseは実際にはfalseをテストします）
• 上記のリンクのソリューションは実際に機能します!

ファイアフォックス

• 仮想イベントでのみ発生onpopstateします
• 実際にJavaScriptを再実行します（設定loaded=falseは実際にはfalseをテストします）
• リンクされたソリューションが実際に機能するにはloaded、ページの読み込み時に true に設定する必要があります。これにより、Chrome が壊れます。

サファリ

• 実際のイベントと仮想イベントのonpopstate両方で発生します
• イベントの前に JavaScript を再実行しないloadedようです (したがって、以前に true に設定されていれば true になります!)

うまくいけば、私は何かが足りないだけです...

jquery を使用してクライアント側アプリケーションを開発しており、アプリでアクセスしたすべてのページを保存して、それらに戻るようにしたいと考えています。

履歴 APIを使用します。

アクセスしたすべての URL を表示するにはどうすればよいですか?

ありがとうございました

次の関数では、url は現在のURL を返します。私が探しているのは、その関数内で前の URL を取得することです。たとえば、私がオン/cars/ferrariで に行くと/cars/ford、urlが返さcars/fordれますが、取得したいです/cars/ferrari。

statechangeイベント内の以前の URL を取得するにはどうすればよいですか?

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_historyを読んで history.api をいじった後、最初のパラメータをどのように使用するのか疑問に思っています

stateObj は js オブジェクトであることを理解しているので、次のようになります。

しかし、どのように使用する必要がありますか？後でこのオブジェクトを取得できる方法を教えてください。

また、タイトルは現在使用されていないことも理解しており、独自の JavaScript メソッドを使用してページのタイトルを変更する必要があります。私は正しいですか？

次の機能を追加したいdataTableURLで追跡する必要があるリリースのリストを表すオブジェクトがページにあります/releases

1. の場合/releases?query=<query>、dataTableは提供されたクエリで初期化されます
2. queryユーザーが検索語を変更すると、パラメーターが更新されます
3. ブラウザの戻るボタンと進むボタンは適切なクエリを実行します

これまでのところ、最初の2つは実行できますが、イベントをリッスンするとpopstate、テーブルを再描画すると、pushStateそれを防ぐ方法がわかりません。これまでの私のコードは次のとおりです。

rails私はバックエンドを使用しており、これはページで提供されているインラインJavaScriptであることに注意してください。

http://qz.com/と同様の無限スクロール効果を求めるスタートアップ向けの新しいブログを作成しています。

また、前述のリンク内で見られるように、URL の変更も含める必要があります。

私の人生では、それがどのように行われたのかわかりません.HTML5 History APIを使用していると思いますが、Internet Explorerでも動作していたので、そうではないでしょうか?

これを機能させる方法 (WordPress を使用) について誰かが私にいくつかの指針を与えることができれば、私は非常に感謝しています。

私は現在、HTTP 投稿フォームとヒストリー プッシュステートで少し問題に直面しています。

ユーザーが POST フォームを送信し、example.com/page-1このページ内のリンクをクリックするexample.com/page-2と、history.pushstate にリダイレクトされます。JS スクリプトは、現在の URL を変更し、古い URL を履歴にプッシュしてから、新しいコンテンツを表示するだけです。これは私にとっては完璧に機能します。

問題: ユーザーがオンにexample.com/page-2なり、手動でページを更新すると(ctrl+r または更新ボタン)、Chrome はユーザーにフォームを再度送信するように求めます。しかし、フォームは実際には入っexample.com/page-1ていたので、この「新しい」ページで再度質問する理由はありません。

ブラウザからの再投稿プロンプトを防ぐために、popstate の変更時に JavaScript で以前に送信されたすべてのデータをクリアする方法はありますか? または、履歴の状態で何か不足していますか? それとも、現在ブラウザでまだうまく実装されていないものですか?

他のブラウザーでは pushstate を実装していないため、chrome でのみテストしました。