web-dev-qa-db-ja.com

既存のページをリロードせずにブラウザのアドレスバーのURLを変更します

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

私は現在のjavascriptアニメーションを使用して内部リンクを機能させる方法を探しています。クリックするとページがリロードされることはありません-しかし、URLをブラウザ。

多くのWebサイトがこれを行っています。ここに良い例があります。 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が変更されたときにブラウザーがページをリロードしないようにするにはどうすればよいですか？

他のウェブサイトはどのようにそれをしますか？このメソッドは何と呼ばれますか（さらに調査することができます）？

ありがとう。

javascripthtmlurl
28
Radley Sustaire

同様の質問があります 。

以下に例を示します。

function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html;
    document.title = response.pageTitle;
    window.history.pushState(
        {
            "html":response.html,
            "pageTitle":response.pageTitle
        },
        "",
        urlPath
   );
}
24
Maziar Aboualizadehbehbahani

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

私はそれを深く見すぎていませんが、それは私にはそれが見えるものです。

2
Charlie Kilian