2012-03-29 23 views
4

ページを更新せずにページのHTMLとURLを更新する方法を誰かが指摘できるかどうかは疑問です。実際のページをリフレッシュせずにページhtmlとurlを更新するには

これを処理する既存のjavascriptライブラリがありますか、それともこの種のものをカバーする良い本がありますか?

このような効果を利用したサイトの例を次に示します。

http://onedesigncompany.com/

注意実際のHTMLは可視ページリフレッシュとの円滑な移行を維持しながら、セクションは、URLと同様に変更されたときに更新されます。このサイトはjavascriptなしでも正常に動作します。

また、誰かがこのアプローチを使用することにいずれかの欠点を見た場合、私はすべての耳です。

+0

可能な複製[ページをリロードせずにURLを変更](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page)また、このページの右側の「関連する」リストに多数の重複があります。 – JJJ

+0

まあ、私は特に、ページ上のhtmlがどのように更新されているかに興味があります。 url barを変更するだけでもっと見えます。 – puddletown

+0

これは単なる基本的なJavaScriptです。 – JJJ

答えて

4

あり、それはPushStateと呼ばれています。

最新のブラウザ(インターネットエクスプローラ除外:P)のほとんどがサポートしている新しいテクノロジーです。基本的には、javascriptでアドレスバーを変更します。

私は何も見えないかもしれませんが、それは本当にきれいです!通常、これはハッシュwww.example.com#/contactなどで行います。

この技術を使用した最新のプロジェクトでは、ブラウザがPushStateをサポートしているかどうかを判断できるHistory.jsというjsプラグインを使用しました。

これに応じて、新しいサイトを読み込む代わりにプッシュステートといくつかのajaxを行う関連リンクにイベントをバインドするか、または<a href="">を正常に動作させます。
これは、すべてのブラウザをむしろ幸せにします。

私のスクリプトは、基本的には、pushstateとajaxの場合と同じ結果を生成します。

編集:
あなたのこの例のちょっとしたメモです。それはかなり精巧に作られています:)
新しいページをajaxで読み込んでHTMLを取得しますが、そのページを再度参照すると取り出した結果が再表示されるので、不要なajax呼び出しは行われません。

+0

ありがとう!私はそれだと思う!私は答えをマークする前にこれをもう少し調べるつもりです。 – puddletown

+0

あなたの編集:うん!私はそのサイトに本当に感心しています。最初の見た目からは、完全に漸進的に強化されているように見え、jsはうまく最適化されています。非常に賢いもの。 – puddletown

6

ページの再読み込み部分に必要がある場合は、ページ全体をリロードせずに、私は非常にjQuery.Load()を使用することをお勧めします:jQuery.loadで

http://api.jquery.com/load/

()あなたはdivを選択することができます別のWebページからそのコンテンツをコンテンツにリロードします。たとえば:

$(".myDiv").load("/myOtherwebpage.html"); 

また、他のページ上の特定の要素からコンテンツを指定することができます。しかし

$(".myDiv").load("/myOtherwebpage.html .myOtherClass"); 

、あなたが別のページから、すべてのコンテンツをリロードし、URLを変更する必要がある場合別のページを使用している場合は、そのページにリンクすることをおすすめします。 jQueryでこれを行うとパフォーマンスが向上しません。

+1

私の最初のことでしたが、実際のHTMLは更新されていませんただスクリプトでスワップアウトされています。ソースを表示してサイトをナビゲートすると、htmlの変更を見ることができます。 – puddletown

+2

@ user1300321:ソースコードはソースコードですが、javascriptを使用してソースコードを変更しているわけではありません。あなたはページのナビゲーションがすべてを望んでいるようだが、それを使わずに...なぜ? – musefan

関連する問題