Re: [html5j:2313] 【質問】ChromeでonPopStateが通常のページロード時にも呼ばれる件について
Akitoshi Manabe
私もHistoryオブジェクトには関心があったので、この機にに軽く調べてみました。
Chrome に関しては、同様のバグがあることを言及されたエントリがあり
http://desandro.github.com/dropshado.ws/post/ignore-initial-popstate.html
この方は、「setTimeout() を使い、10msec
遅らせてリスナ登録する方法で回避してるよ」というサンプルコードも公開しています。この方法だと、正しい実装のブラウザでも当面は10msのラグが発生しますが、切り分けの内部処理は必要なくなるかも。
私自身は、onhashchange や
タイマーloopによるURL監視を行い、URL変更時にAjaxを用いるアプローチで「旧ブラウザにも対応する方法」を使っていますが、HTML5が主流となる今後は、Historyオブジェクトを使って「接続失敗するかもしれないAjaxの結果次第でブラウザ履歴に残るURLを更新するかどうか選択する」というアプローチがとれますね。改めて考えると、便利なAPIだと気づかされました。
2012年6月5日 17:57 川本佑樹 <kawam...@gmail.com>:
> はじめまして、川本と申します。
> 表題の件についてご質問させてください。
>
> 皆様の知恵を貸していただければ幸いです。よろしくお願いします。
>
> 【質問】ChromeでonPopStateが通常のページロード時にも呼ばれる件について
>
> やりたいこと：
> コンテンツの検索ページにて、Javascriptでセレクトボックスの値入力に合わせて、pushStateによるURLの変更とajaxによるコンテンツの取得を行なうページを構築しており、
> Browser backの際にURLと矛盾なくコンテンツを表示させたいと思っています。
> コンテンツ表示の際にはJavascriptのコードでページの表示を初期化する必要があります。
>
> 実装方針：
> ページ表示の初期化処理を一つのfunctionにまとめており、document.ready()とonPopState()それぞれから呼ばれるようにしています。
>
> 問題点：
> Chromeでアクセスした場合、Browser Backのみならずページローディング時にも呼ばれるため、
> ページローディング時に初期化処理のfunctionが二度呼ばれます。
>
> 対応方針：
> Chromeからのアクセスを判定して処理を切り分けてもよいのですが、
> 現在のHTML5の草案だと、通常のページローディング時にはonPopStateは呼ばれないのが正しい実装ですので、将来Chromeの実装が変更になる可能性は高いと考えています。
>
> 現状では二重に呼ばれても処理が問題ないように内部処理を実装し、動作させております。
>
> 質問：
> 現時点で差分を吸収しつつ将来の変更に備えるために、他にうまい解決策はありますでしょうか？
> Browser
> backの際に呼ばれるpopStateと通常のページローディング時に呼ばれるpopStateを判定して処理する方法が現状の対応方法よりベターと考えているのですが、どのように判定処理を行えば実現できますでしょうか？引数で渡ってきているEventをチェックしたのですが、特に差分があるようには見えませんでした。
>
> 参考：
> http://www.w3.org/TR/html5/history.html#the-history-interface
> https://developer.mozilla.org/en/DOM/window.onpopstate
> http://desandro.github.com/dropshado.ws/post/ignore-initial-popstate.html
>
> --
> このメールは Google グループのグループ「html5j.org」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/html5-developers-jp/-/_8AfqpYN9eIJ
> にアクセスしてください。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja
> からこのグループにアクセスしてください。
teramako
バグとしてはこの辺りですかね
http://code.google.com/p/chromium/issues/detail?id=63040
私もpushStateしているページでは、
if (aEvent.state && ("prop" in aEvent.state)) {
// ....
}
と処理してました。（特にChrome用にというわけでもなく自然とそうなってただ
けですが）
川本佑樹
setTimeout()を使うやり方は10msecというのが適切な値かどうかが懸念材料として残りますね。
どんな環境でも同じように動作するか心配ですので、見送ろうと思います。
On 6月5日, 午後6:55, Akitoshi Manabe <akitoshi.man...@gmail.com> wrote:
> 眞鍋です。
> 私もHistoryオブジェクトには関心があったので、この機にに軽く調べてみました。
>
> Chrome に関しては、同様のバグがあることを言及されたエントリがありhttp://desandro.github.com/dropshado.ws/post/ignore-initial-popstate....
>
> この方は、「setTimeout() を使い、10msec
> 遅らせてリスナ登録する方法で回避してるよ」というサンプルコードも公開しています。この方法だと、正しい実装のブラウザでも当面は10msのラグが発生しますが、切り分けの内部処理は必要なくなるかも。
>
> 私自身は、onhashchange や
> タイマーloopによるURL監視を行い、URL変更時にAjaxを用いるアプローチで「旧ブラウザにも対応する方法」を使っていますが、HTML5が主流となる今後は、Historyオブジェクトを使って「接続失敗するかもしれないAjaxの結果次第でブラウザ履歴に残るURLを更新するかどうか選択する」というアプローチがとれますね。改めて考えると、便利なAPIだと気づかされました。
>
> 2012年6月5日 17:57 川本佑樹 <kawamot...@gmail.com>:
>
>
>
>
>
>
>
> > はじめまして、川本と申します。
> > 表題の件についてご質問させてください。
>
> > 皆様の知恵を貸していただければ幸いです。よろしくお願いします。
>
> > 【質問】ChromeでonPopStateが通常のページロード時にも呼ばれる件について
>
> > やりたいこと：
> > コンテンツの検索ページにて、Javascriptでセレクトボックスの値入力に合わせて、pushStateによるURLの変更とajaxによるコンテンツの取得を行なうページを構築しており、
> > Browser backの際にURLと矛盾なくコンテンツを表示させたいと思っています。
> > コンテンツ表示の際にはJavascriptのコードでページの表示を初期化する必要があります。
>
> > 実装方針：
> > ページ表示の初期化処理を一つのfunctionにまとめており、document.ready()とonPopState()それぞれから呼ばれるようにしています。
>
> > 問題点：
> > Chromeでアクセスした場合、Browser Backのみならずページローディング時にも呼ばれるため、
> > ページローディング時に初期化処理のfunctionが二度呼ばれます。
>
> > 対応方針：
> > Chromeからのアクセスを判定して処理を切り分けてもよいのですが、
> > 現在のHTML5の草案だと、通常のページローディング時にはonPopStateは呼ばれないのが正しい実装ですので、将来Chromeの実装が変更になる可能性は高いと考えています。
>
> > 現状では二重に呼ばれても処理が問題ないように内部処理を実装し、動作させております。
>
> > 質問：
> > 現時点で差分を吸収しつつ将来の変更に備えるために、他にうまい解決策はありますでしょうか？
> > Browser
> > backの際に呼ばれるpopStateと通常のページローディング時に呼ばれるpopStateを判定して処理する方法が現状の対応方法よりベターと考えているのですが、どのように判定処理を行えば実現できますでしょうか？引数で渡ってきているEventをチェックしたのですが、特に差分があるようには見えませんでした。
>
> > 参考：
> >http://www.w3.org/TR/html5/history.html#the-history-interface
> >https://developer.mozilla.org/en/DOM/window.onpopstate
> >http://desandro.github.com/dropshado.ws/post/ignore-initial-popstate....
川本佑樹
stateの中身で分岐する方法でうまく処理できそうです。
それだけだと多少足りなかった部分がありましたので、記載します。
ページA → ページB push_state→ ページC
ページAからBはaタグをクリックしての通常のローディングです。
この状況下で、ページB,ページCのどちらもonPopStateの中の処理をしたかったのですが、
ページCからBにBrowserBackした際はstateの中身は当然空ですので、
ページB内の処理でreplaceStateでstateの中身を設定してあげる事でやりたかった判定が取れました。
On 6月5日, 午後8:50, teramako <teram...@gmail.com> wrote:
> こんにちは
>
> バグとしてはこの辺りですかねhttp://code.google.com/p/chromium/issues/detail?id=63040
>
> 私もpushStateしているページでは、
> if (aEvent.state && ("prop" in aEvent.state)) {
> // ....}
>
> と処理してました。（特にChrome用にというわけでもなく自然とそうなってただ
> けですが）
>
> (2012/06/05 18:55), Akitoshi Manabe wrote:
>
>
>
>
>
>
>
> > 眞鍋です。
> > 私もHistoryオブジェクトには関心があったので、この機にに軽く調べてみました。
>
> > Chrome に関しては、同様のバグがあることを言及されたエントリがあり
> >http://desandro.github.com/dropshado.ws/post/ignore-initial-popstate....
>
> > この方は、「setTimeout() を使い、10msec
> > 遅らせてリスナ登録する方法で回避してるよ」というサンプルコードも公開しています。この方法だと、正しい実装のブラウザでも当面は10msのラグが発生しますが、切り分けの内部処理は必要なくなるかも。
>
> > 私自身は、onhashchange や
> > タイマーloopによるURL監視を行い、URL変更時にAjaxを用いるアプローチで「旧ブラウザにも対応する方法」を使っていますが、HTML5が主流となる今後は、Historyオブジェクトを使って「接続失敗するかもしれないAjaxの結果次第でブラウザ履歴に残るURLを更新するかどうか選択する」というアプローチがとれますね。改めて考えると、便利なAPIだと気づかされました。
>
> > 2012年6月5日 17:57 川本佑樹 <kawamot...@gmail.com>:
> >> はじめまして、川本と申します。
> >> 表題の件についてご質問させてください。
>
> >> 皆様の知恵を貸していただければ幸いです。よろしくお願いします。
>
> >> 【質問】ChromeでonPopStateが通常のページロード時にも呼ばれる件について
>
> >> やりたいこと：
> >> コンテンツの検索ページにて、Javascriptでセレクトボックスの値入力に合わせて、pushStateによるURLの変更とajaxによるコンテンツの取得を行なうページを構築しており、
> >> Browser backの際にURLと矛盾なくコンテンツを表示させたいと思っています。
> >> コンテンツ表示の際にはJavascriptのコードでページの表示を初期化する必要があります。
>
> >> 実装方針：
> >> ページ表示の初期化処理を一つのfunctionにまとめており、document.ready()とonPopState()それぞれから呼ばれるようにしています。
>
> >> 問題点：
> >> Chromeでアクセスした場合、Browser Backのみならずページローディング時にも呼ばれるため、
> >> ページローディング時に初期化処理のfunctionが二度呼ばれます。
>
> >> 対応方針：
> >> Chromeからのアクセスを判定して処理を切り分けてもよいのですが、
> >> 現在のHTML5の草案だと、通常のページローディング時にはonPopStateは呼ばれないのが正しい実装ですので、将来Chromeの実装が変更になる可能性は高いと考えています。
>
> >> 現状では二重に呼ばれても処理が問題ないように内部処理を実装し、動作させております。
>
> >> 質問：
> >> 現時点で差分を吸収しつつ将来の変更に備えるために、他にうまい解決策はありますでしょうか？
> >> Browser
> >> backの際に呼ばれるpopStateと通常のページローディング時に呼ばれるpopStateを判定して処理する方法が現状の対応方法よりベターと考えているのですが、どのように判定処理を行えば実現できますでしょうか？引数で渡ってきているEventをチェックしたのですが、特に差分があるようには見えませんでした。
>
> >> 参考：
> >>http://www.w3.org/TR/html5/history.html#the-history-interface
> >>https://developer.mozilla.org/en/DOM/window.onpopstate
> >>http://desandro.github.com/dropshado.ws/post/ignore-initial-popstate....