30

重複の可能性：
ページをリロードせずにURLを変更する

現在のJavaScriptアニメーションを使用して、クリックしたときにページをリロードせずに内部リンクを機能させる方法を探していますが、ブラウザでURLを更新したいと思います。

多くのウェブサイトがこれを行っています。ここに良い例があります：http：//grooveshark.com/# ！/ search？q = adf

ページをリロードせずにURLを更新するにはどうすればよいですか？

詳細：

現在、私のページのリンクは次のよう<a href="#aboutus">About Us</a>になっています。これ<div id="aboutus"></div>により、javascriptを介して移動できます。

javascriptは次のようになります。

$("#navigation a").click(function(e){
  animate(..scroll to section..);
  e.preventDefault(); // <==========
});

「e.preventDefault（）」がURLを更新しない原因であると思いますが、URLが変更されたときにブラウザがページをリロードしないようにするにはどうすればよいですか？

他のウェブサイトはどのようにそれを行いますか？この方法は何と呼ばれていますか（私はそれをさらに研究することができます）？

ありがとう。

4

2 に答える 2

25

これも同様の質問です。

次に例を示します。

function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html;
    document.title = response.pageTitle;
    window.history.pushState(
        {
            "html":response.html,
            "pageTitle":response.pageTitle
        },
        "",
        urlPath
   );
}
于 2012-06-08T18:06:04.097 に答える
2

すべてがAJAXで行われているように私には見えます。URL内の#!は、ブラウザにURLの残りの部分をアンカーとして解釈させます-アンカーはページのリロードを引き起こしません（実際、サーバーは通常のHTTPリクエストの過程でブラウザがどのアンカーにあるかを決して認識しません）。URLが変更されると、Javascriptが引き継ぎ、クエリ文字列を検査し、Webサービスを使用してサーバーから適切なものをロードします。

私はそれをあまり深く見ていませんが、それは私にはそれがどのように見えるかです。

于 2012-06-08T18:06:08.210 に答える