2012-01-08 14 views
0

私はHTML5のonpopstate/pushStateメソッドを使ったことがありません。しかし私は、ページをスクロールしてアドレスバーのハッシュをビューポートの現在表示されている要素のIDに変更するWebサイトを構築しています(または既に作成しています)。だから私は一枚のページレイアウトで一種のブラウザヒストリーとDeep Linkingを持っています。hashchangeを使用したWebサイト - popstateイベントが利用可能かどうかを確認していますか?

私はまだtop.location.hashを設定し、hashchange()機能を使用してこれを行っています。今、私はこの新しいHTML5 popstate/onPushstateメソッドを見て、これが絡み合っていると思っていました...

最初に:これを使う利点は何ですか?popstate/onPushStateメソッドは何ですか? top.location.hashを使用する古典的な方法よりもこれを使用する方が良いですか?パフォーマンスは向上していますか?

もしそうなら、現在のブラウザがこのメソッドをサポートしているかどうかを調べる方法がありますか?だから私は古いブラウザでは、古い方法で最新のブラウザとフォールバックのためにそれらのメソッドを使用することができます。

これは可能ですか?もしそうなら、どのように?

答えて

0

を使用しています。

履歴の現在のアイテムを置き換えたり、新しいアイテムを作成したりすることができます。ハッシュタグソリューションでは、新しいものだけを追加できます。

履歴エントリを作成または置換するときには、urlを変更して、popstateで返されるjavascriptオブジェクトを渡すこともできます。このオブジェクトにはすべてのデータを含めることができます。

このapiをよく使う良い例はgithub(http://www.github.com)です。最初はフルページを一度送った後、ページを変更して、最初のリクエストでロードする新しいページと一致するようにURLを送ります。あなたは歴史のサポートをテストしたい場合は、このようにこれを行うことができます

(これは、リフレッシュが非常にうまく機能することを意味します):

if (history && history.pushState) 
+0

'ハッシュタグソリューションでは、新しいものだけを追加できます。' - あなたは 'location.replace'を使うことができます – Quentin

1

このpopstate/onPushStateメソッドを使用する利点は何ですか?

実際のURLは、機能するためにJavaScriptに依存しません。

もしそうなら、現在のブラウザがこのメソッドをサポートしているかどうかを調べる方法がありますか?

if (history && history.pushState) 

...またはちょうどあなたがHTML5のヒストリーAPIでより多くのことを行うことができますa compatibility library

+0

が本当に利用可能になりましonpushStateイベントあり?私はインターネット上のどこにでもそれに関する情報を見つけることができませんでした。私はそれについてのより多くの情報と現在のブラウザとの互換性を求めることができるいくつかの関連リンクを指摘できますか? – Aklin

+0

イベントはポップステートです。 https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history – Quentin

+0

ありがとう!私が知っている、私はonpushstateについて尋ねていた。私のusecaseのために、私はpushstateイベントにコールバックを割り当てる必要があります。 – Aklin

関連する問題