ページをリロードせずに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

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

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

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

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

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language