問題タブ [hashchange]

ブラウザーの [戻る] ボタンと [進む] ボタンを操作しようとしている Ajax アプリに問題があります。jQuery History プラグインを使用してブラウザの履歴を有効にしています。

アプリは製品のページで構成されています。ユーザーがさまざまな値で製品を並べ替えることができる並べ替えバーがあります。ユーザーは、製品の衣類カテゴリ (ドレス、トップス、ボトムス、スカートなど)、サブカテゴリ部門 (スカート: ミニ、マキシ、ハイウエスト、自由奔放に生きる/ヒッピーなど)、サイズ (XS SML XL XXL XXXL)、色(白、黒、グレー、青、赤など)、時代、素材。

ほとんどのオプションは、Ajax を使用して最後に選択したオプションを適切な DIV にロードすることで有効になります。

たとえば、黒を選択するには、次のコードを実行します。

次に、ユーザーがブラウンを選択した場合:

次に、ユーザーが黒の選択を解除した場合:

戻る/進むボタンをサポートする必要がない限り、これは問題なく機能しますが、jQuery History を介して戻るボタン機能を追加すると、問題が発生します。例: 前の例を使用すると、ユーザーは黒と茶色の色を選択しました。ここで、ユーザーが戻るボタンをクリックしたとします。ユーザーは茶色の選択が削除されることを期待しますが、読み込まれる URL は次のとおりであるため、そうではありません。

そしてそうではない

それが必要なものです。

一連の「元に戻す」パラメータをクエリ文字列に追加することで、この問題を回避しようとしました。たとえば、

二重スラッシュの前に現在のクエリ文字列が含まれ、スラッシュの後に「戻る」クエリ文字列が含まれます。したがって、このコードを使用すると、新しいリンクがクリックされたことがわかれば、現在のクエリ文字列 (スラッシュの前) を読み込むことができ、戻るボタンがクリックされたことがわかれば、スラッシュに続く「戻る」クエリ文字列を読み込むことができます。 .

しかし問題は、戻る/進むボタンがクリックされたかどうかを検出する方法がないように見えることです。jQuery History は hashchange イベントの下で動作し、そのイベントは (私が知る限り) どのイベントがそれを起動したかを区別しません。

これは私の問題です。StackOverflow.com の非常に賢い人々が解決策を見つけるのを手伝ってくれたら、とても感謝しています。ありがとうございました！

Safariで動作しますonHashChangeか? hashChangeWindows 7 の Safari 4.0.4 でテストしましたが、うまくいきません。

うまくいかない場合、hash変更されたかどうかを追跡する解決策はありますか?

このようにして、ブラウザがサポートしているonHashChangeかどうかを確認しようとしています。サポートしていない場合は、一部のコードを非表示にします。

私もこれを試しました：

Quirksmodeで説明されているように、これは機能するはずですが、alertたとえばintrue stateを実行するとSafari、アラートが表示されますが、SafariはonHashChange：Sをサポートしていません。

何が問題なのですか？正しい方向に進んでいない場合、どのように確認すればよいですか？

次の 2 つのドメインを検討してください: domain1.com と domain2。

domain1 から、domain2 を指す iframe を開きます。

今、私はこれらの人が互いに通信できるようにしたいと考えています。これは、両方のドメインにハッシュ変更イベント リスナーを適用することで成功しました。

そうすれば、ドメイン 2 が新しいハッシュを使用して parent.location を呼び出すと、親ウィンドウ (ドメイン 1) のハッシュがトリガーされます。また、親からの I がその src 属性を新しいハッシュに変更すると、iframe でハッシュ変更イベントがトリガーされます。

これはうまくいきます！

ここで問題が発生します。

ブラウザーの前後の機能が台無しになります。簡単に言えば、2 つのハッシュ インスタンスを作成することで、最初に iframe のハッシュを循環する必要があるため、ブラウザの戻るボタンを 2 回クリックして親ハッシュを変更する必要があります。

履歴オブジェクトを台無しにすることなく、クロスドメイン iframe 双方向と通信するにはどうすればよいですか?

ありがとう！

Facebook ページの上に「オーバーレイ」される JavaScript スクリプトを作成しようとしています。DOMContentLoaded を使用して、コンテンツがロードされたことを検出し、追加のものを追加します。ただし、Facebook は新しいページに移動するときにページを実際に「リロード」しないため (AJAX を使用するだけです)、DOMContentLoaded ハンドラーは実行されません。繰り返しますが、目を通しておかなければならない新しいものがあります。

とにかく、変更を検出するために、Facebook がページのハッシュを変更していたので onhashchange を使用することを考えましたが、Firefox 4 (これで Firefox 3 以降をサポートする必要がありますが、他のブラウザーはサポートしない) では、Facebook はハッシュを変更しません。 Firefox 3.6 より前のバージョンでは、onhashchange はありません。

DOMNodeInserted を使用することを考えましたが、ページの速度が本当に遅くなりますか? (このスクリプトでは速度が低下することはありません。)

私はこの問題を抱えています（私はjQueryを使用していますが、それに制限されていません）：

アンカーナビゲーション（#id）とAjaxリクエストの組み合わせを使用しています。ページを所定の位置に移動する（アンカーナビゲーションを使用）、または情報をフェッチする（Ajaxを使用）には、onhashchangeイベントを使用します。

編集：私は少しタイプミスがありました。mouseDownフラグがtrueであり、hashchangeイベントがトリガーされたかどうかを確認するのを忘れたので、ifステートメントを追加しました。

jQueryでは次のようになります:(もちろん、このコードは関数にラップされ、DOMの読み込み時に初期化されますが、質問には関係ありません）

onhashchangeをサポートするブラウザーのみがコードを読み取るようにするために、次のようにカプセル化します。

私のWebアプリは、ブラウザーの戻る/進むボタンを押したときにのみonhashchangeイベントをトリガーするように作成されています。それをするために私はこれが好きです：

ビューポート内をクリックすると、mousedownイベントがトリガーされます。mousedownイベントがトリガーされた場合、ブラウザーの戻る/進むボタンをクリックしなかったことがわかり、次のようなフラグを使用してonhashchangeイベントを停止できます。

これは、マウスイベントをウィンドウオブジェクト（？）にバインドできないことをシームするため、IEに問題を引き起こします。IEはmousedownイベントを「見る」ことはありません。

このIEの問題を解決するために、「clientY」プロパティを取得できます。このプロパティは、IEのすべてのイベント呼び出しで渡され、マウスの座標を示します。e.clientYが0未満の場合、マウスはビューポートの外側にあり、ブラウザの戻る/進むボタンをクリックしてonhashchangeをトリガーしたことがわかります。これで、次のようになります。

このソリューションは、キーボードの矢印を使用してナビゲートするためのサポートを追加する必要があるまで、魅力のように機能していました。これで、画面上のどこにマウスがあるかは関係ありません。IEウィンドウが「アクティブ」である限り、キーボード入力をリッスンするキーダウンイベントは、キーボードを押すとトリガーされます。これは、clientYチェックが意図したとおりに機能しなくなったことを意味します。

問題：

私の知る限り、onhashchangeはウィンドウオブジェクトにバインドする必要があります。別のイベントをリッスンして1つのイベントを制御できるようにする場合は、すべてのイベントを同じコールバック関数内で処理する必要があります。

どうすればこれを機能させることができますか？

こんにちは、サブサイトから ajax で div を読み込んでいます。このサブサイトには、次のようなリンクがあります。

ajax リクエストが発生するホームページには、この #someIDonHomepage div があり、ページをその位置にジャンプさせたいと考えています。

ただし、ajax でアンカーを読み込んでいるため、これは機能しません。

どうすればそれを解決できますか？

アンカーをクリックしたときにジャンプをアニメーション化する jquery を使用して、このアニメーション化されたスクロール スクリプトを作成しました。

どうすればそれを解決できますか？ありがとうございました

http://iamwhitebox.com/staging/arkitek/#press/index.htm
http://iamwhitebox.com/staging/arkitek/#contact/index.htm

これらのフロートが IE で壊れるのはなぜですか?

また、「jquery.ba-hashchange.min.js」でハッシュチェンジをそうでないようにする方法を知っている人はいますか?

ありがとう

バックエンドに CodeIgniter を、フロントエンドに Backbone.js を使用して Web アプリを開発しています。また、HTML5 Boilerplate を開始テンプレートとして使用しています。

アプリケーションのメイン ナビゲーションとして Backbone の Controller と History を使用しています。私は過去に一度それを行いましたが、すべて正常に機能しています。問題は、Backbone.History.start() で hashchange イベント キャプチャを開始し、リンク example.com/#home をクリックすると、URL のハッシュが変更され、イベントが発生しますが、2 秒後にハッシュがクリアされることです。 from url で、javascript エラーがスローされるのは ie7 のみです。

ソースコードを調べたところ、ハッシュ値の変更を確認する間隔を実行するIFRAMEを作成することにより、IE7でhashchangeイベントが達成されました。

以前にこの奇妙なバグがあり、これを解決する方法を知っている人はいますか?

私は次のコードを持っています

ハッシュを変更するリンクをクリックすると、他のすべてのブラウザでアラートが表示されますtest

ただし、IEでは、onhashchangeをサポートしているという最初のアラートが表示されますが、ハッシュが変更されても何も起こりません。

何か案は？