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

2519
Robin Rodricks 2009-05-06 00:54.

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

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

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

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

18 answers

2125
David Murdoch 2010-07-29 05:30.

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

644
Vivart 2010-08-18 03:59.

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

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

ここからこれについてもっと読む

144
George Filippakos 2012-11-20 00:32.

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

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

これは、戻るボタンの機能を「壊す」でしょう。これは、画像ギャラリー(表示したすべての画像に戻るのではなく、戻るボタンをギャラリーのインデックスページに戻す)などの場合に必要になることがありますが、各画像に固有のURLを指定します。

132
Haimei 2015-06-11 08:25.

これが私の解決策です(newUrlは、現在のURLに置き換える新しいURLです):

history.pushState({}, null, newUrl);
112
Robin Day 2009-05-06 00:57.

注:HTML5ブラウザーを使用している場合は、この回答を無視する必要があります。他の回答に見られるように、これは現在可能です。

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

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

87
Noname 2009-05-14 12:14.
parent.location.hash = "hello";
31
Alireza 2017-07-02 22:03.

最近のブラウザとHTML5には、pushStatewindowで呼び出されるメソッドがあります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');

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

変更#は非常に簡単で、次のようになります。

window.location.hash = "example";

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

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

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

24
Shine 2014-01-24 22:49.

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

parent.location.hash = "hello";

そして:

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

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

23
Jeremy Warne 2011-04-20 01:43.

ユーザーがページをブックマーク/共有できるようにすることで、正確に正しい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);
}

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

17
Suraj 2015-10-27 22:33.

以下は、ページをリロードせずに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');
13
Gumbo 2009-05-06 00:58.

URLフラグメントを変更するだけではない場合、場所(window.locationまたはdocument.location)を変更すると、その新しいURLでリクエストが発生します。URLを変更すると、URLも変更されます。

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

11
Nate 2009-12-14 12:57.

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

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

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
9
Erenor Paz 2013-09-06 03:55.

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

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

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

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

9
Dheeraj Thedijje 2019-11-29 23:48.

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

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

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

みんなとても役に立ちました。

8
Prathamesh Rasam 2015-08-16 01:55.

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

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

5
Vinay Kaithwas 2020-07-18 20:34.

新しいURL。

let newUrlIS =  window.location.origin + '/user/profile/management';

ある意味で、pushState()の呼び出しは、window.location = "#foo"の設定に似ており、どちらも現在のドキュメントに関連付けられた別の履歴エントリを作成してアクティブにします。ただし、pushState()にはいくつかの利点があります。

history.pushState({}, null, newUrlIS);
0
Omar bakhsh 2020-06-10 13:07.

リロードせずにナビゲートする必要があるのはこれだけです

// add setting without reload 
location.hash = "setting";

// if url change with hash do somthing
window.addEventListener('hashchange', () => {
    console.log('url hash changed!');
});

// if url change do somthing (dont detect changes with hash)
//window.addEventListener('locationchange', function(){
//    console.log('url changed!');
//})


// remove #setting without reload 

history.back();

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

DropMixはNFC対応のカードゲームで、基本的にはリミックスアーティストになります。現在、Amazonでは$ 30まで下がっており、これまでで最高の価格に匹敵します。ロックバンドで有名なHarmonixによって開発されたDropMixは、おそらく少し野心的すぎるように思われます。結局のところ、ほとんどの人は素晴らしいリズムを持っていませんが、ゲームは驚くほどうまく実行されます。

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

写真:APメアリーJ.ブライジは、間もなくハリウッドウォークオブフェイムのスターを獲得します。これは、メアリーJよりもハリウッドウォークオブフェイムのほうが正直なところ恩恵です。

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

画像:グラズ工科大学/ NataschaEiblがデザインしたロゴ。MeltdownとSpectreは、攻撃者がシステムメモリに保存されているあらゆる種類の情報にアクセスできるようにする2つの脆弱性に付けられた名前です。

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

日本人に襲われたときに真珠湾にいた97歳の第二次世界大戦のベテランが、ニューヨークのブルックリンから追い出されています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language