web-dev-qa-db-ja.com

ページをリロードせずにURLを変更する方法

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

可能であれば、の前の＃ハッシュにアクセスしたいと思います。

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

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads
javascripthtmlurlurl-rewritingfriendly-url
2085
Robinicks

これは、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の記事 ）を参照してください。

1796
David Murdoch

HTML5では history.pushState() と history.replaceState() メソッドが導入され、それぞれ履歴エントリを追加したり修正したりすることができます。

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

これについてもっと読む here

461
Vivart

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

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

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

106
George Filippakos

注：HTML5ブラウザを使用している場合は、この回答を無視してください。他の答えで見られることができるようにこれは今可能である。

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

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

100
Robin Day
parent.location.hash = "hello";
78
Steve

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

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

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

25
Thomas Stjernegaard Jeppesen

HTML5の前に我々が使用することができます：

parent.location.hash = "hello";

そして：

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

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

21
Shine

あなたがやろうとしていることが、ユーザーがページをブックマークしたり共有したりすることを許可していて、それを正確なURLにする必要がなく、他にハッシュアンカーを使用しない部品;上記の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);
}

それが理にかなっていることを願っています！状況によっては便利なアプローチです。

20
Jeremy Warne

現代の ブラウザとHTML5 では、ウィンドウpushStateにhistoryというメソッドがあります。それはURLを変更し、ページをロードせずにそれを履歴にプッシュします。

あなたはこのようにそれを使うことができます、それは3つのパラメータをとります、1）状態オブジェクト2）タイトルとURL）：

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);
}
19
Alireza

URLフラグメントを変更しただけではない場合、位置の変更（window.locationまたはdocument.location）により、その新しいURLに対する要求が発生します。 URLを変更すると、URLも変更されます。

Apacheのmod_rewrite 現在使用しているURLが気に入らない場合は、/のようなサーバーサイドのURL書き換え手法を使用してください。

12
Gumbo

アンカータグを追加することができます。私は自分のサイト http://www.piano-chords.net/ でこれを使用しているので、Google Analyticsを使用して、このページで訪問しているユーザーを追跡できます。

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

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

以下はページをリロードせずに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');
12
Suraj

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

その答えから1年近くが経ち、History.jsは成長し、より安定したクロスブラウザになりました。現在では、HTML 5準拠および多くのHTML 4専用ブラウザで履歴状態を管理するために使用できます。 このデモでは あなたはそれがどのように機能するかの例を見ることができます（そしてその機能性と限界を試すことができるということと同様に）。

このライブラリの使用方法や実装方法について何か手助けが必要な場合は、デモページのソースコードを見てみることをお勧めします。

最後に、ハッシュ（およびハッシュバング）の使用に関する問題となる可能性がある包括的な説明については、 このリンク / Benjamin Luptonによる。

7
Erenor Paz

HTML 5 History APIのhistory.pushState()を使用してください。

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

3
Prathamesh Rasam