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

ページをリロードせずに現在のページのURLを変更できる方法はありますか？

できれば＃ハッシュより前の部分にアクセスしたいです。

ドメインの後の部分を変更するだけでよいので、クロスドメインポリシーに違反しているわけではありません。

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

これは、Chrome、Safari、Firefox 4以降、およびInternet Explorer 10pp4以降で実行できるようになりました。

詳細については、この質問の回答を参照してください： ハッシュなしの新しいURLでのアドレスバーの更新またはページの再読み込み

例：

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

次に、を使用window.onpopstateして、戻る/進むボタンのナビゲーションを検出できます。

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

ブラウザ履歴の操作の詳細については、このMDN記事を参照してください。

HTML5にはhistory.pushState()とhistory.replaceState()メソッドが導入されており、履歴エントリをそれぞれ追加および変更できます。

window.history.pushState('page2', 'Title', '/page2.php');

これについて詳しくは、こちらからお読みください

URLを変更したいが、ブラウザの履歴にエントリを追加したくない場合は、HTML5 replaceStateを使用することもできます。

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

これは戻るボタンの機能を「壊す」でしょう。これは、各画像に独自のURLを与えながら、画像ギャラリー（戻るボタンで、表示したすべての画像を移動するのではなく、ギャラリーのインデックスページに戻る必要がある場合など）で必要になる場合があります。

これが私の解決策です（newUrlは現在のURLに置き換える新しいURLです）：

history.pushState({}, null, newUrl);

注：HTML5ブラウザーを使用している場合は、この回答を無視してください。他の回答でわかるように、これは現在可能です。

ページをリロードせずにブラウザでURLを変更する方法はありません。URLは、最後にロードされたページを表しています。変更すると（document.location）、ページが再読み込みされます。

明らかな理由の1つはwww.mysite.com、銀行のログインページのようなサイトを作成していることです。次に、ブラウザのURLバーをに変更しますwww.mybank.com。ユーザーは、自分が実際に見ていることにまったく気づかないでしょうwww.mysite.com。

parent.location.hash = "hello";

最近のブラウザとHTML5では、pushStateウィンドウで呼び出されるメソッドがありますhistory。これにより、URLが変更され、ページをロードせずに履歴にプッシュされます。

次のように使用できます。1）状態オブジェクト2）タイトルとURL）の3つのパラメーターを取ります。

window.history.pushState({page: "another"}, "another page", "example.html");

これによりURLが変更されますが、ページは再読み込みされません。また、ページが存在するかどうかはチェックされないため、URLに反応するJavaScriptコードを実行すると、次のように操作できます。

history.replaceState()新しい履歴を作成する代わりに現在の履歴を変更することを除いて、まったく同じことを行うものもあります！

また、history.pushState存在するかどうかを確認する関数を作成し、次のように残りを続行できます。

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

また、を変更し#て<HTML5 browsers、ページをリロードしないようにすることもできます。これがAngularが使用する方法ですがハッシュタグに従ってSPAです...

変更#は非常に簡単です。

window.location.hash = "example";

そして、あなたはこのようにそれを検出することができます：

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Vivartとgeo1701ですでに述べたように、HTML5 replaceStateが答えです。ただし、すべてのブラウザ/バージョンでサポートされているわけではありません。 History.jsは HTML5の状態機能をラップし、HTML4ブラウザーの追加サポートを提供します。

HTML5より前は、次のものが使用できます。

parent.location.hash = "hello";

そして：

window.location.replace("http:www.example.com");

このメソッドはページをリロードしますが、HTML5はページをリロードしhistory.pushState(page, caption, replace_url)てはならないものを導入しました。

あなたがやろうとしていることがユーザーにページのブックマーク/共有を許可することであり、それが正確なURLである必要はなく、他のものにハッシュアンカーを使用していない場合は、これを2つに分けて行うことができます。部品; 上記で説明したlocation.hashを使用して、ホームページにチェックを実装し、ハッシュアンカーが含まれるURLを探して、次の結果にリダイレクトします。

例えば：

1）ユーザーはオンです www.site.com/section/page/4

2）ユーザーがURLをwww.site.com/#/section/page/6（ハッシュを使用して）に変更するアクションを実行します。ページ6の正しいコンテンツをページにロードしたとしましょう。ハッシュを除いて、ユーザーはあまり邪魔されません。

3）ユーザーがこのURLを他のユーザーに渡すか、ブックマークする

4）他の誰か、または後日同じユーザーが www.site.com/#/section/page/6

5）のコードは、次のようなものを使用してwww.site.com/、ユーザーをにリダイレクトしますwww.site.com/section/page/6。

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

それが理にかなっていると思います！これは、状況によっては便利な方法です。

以下は、ページをリロードせずにURLを変更する関数です。HTML5でのみサポートされます。

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

ロケーションの変更（window.locationまたはdocument.location）は、URLフラグメントを変更するだけではない場合、その新しいURLでリクエストを発生させます。URLを変更すると、URLも変更されます。

現在使用しているURLが気に入らない場合は、Apacheのmod_rewriteなどのサーバー側のURL書き換え技術を使用してください。

アンカータグを追加できます。私は自分のサイトでこれを使用して、Google Analyticsを使用して、ユーザーがページでアクセスしているものを追跡できるようにしています。

アンカータグを追加してから、追跡するページの部分を追加します。

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Thomas Stjernegaard Jeppesenが指摘したように、History.jsを使用できますをて、ユーザーがAjaxリンクとアプリをナビゲートしている間にURLパラメーターを変更ます。

その回答からほぼ1年が経過し、History.jsは成長し、より安定したクロスブラウザーになりました。現在は、HTML5準拠のブラウザだけでなく、多くのHTML4専用ブラウザでも履歴状態を管理するために使用できます。このデモでは、それがどのように機能するか（およびその機能と制限を試すことができる例）を見ることができます。

このライブラリの使用方法と実装方法についてヘルプが必要な場合は、デモページのソースコードを確認することをお勧めします。非常に簡単に実行できることがわかります。

最後に、ハッシュ（およびハッシュバング）の使用に関する問題の包括的な説明については、Benjamin Luptonによるこのリンクを確認してください。

history.pushState()HTML 5 History APIから使用します。

詳細については、HTML5 History APIを参照してください。

この美しくシンプルな関数を使用して、アプリケーションのどこにでもそうすることができます。

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

URLを編集できるだけでなく、タイトルも更新できます。

かなり役に立ちました。