2776

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

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

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

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

20 に答える 20

2291

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

于 2010-07-28T15:30:31.523 に答える
753

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

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

詳しくはこちらから

于 2010-08-17T13:59:35.013 に答える
181

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

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

これにより、戻るボタンの機能が「中断」されます。これは、画像ギャラリー (表示したすべての画像に戻るのではなく、戻るボタンでギャラリーのインデックス ページに戻りたい場合) など、各画像に独自の一意の URL を与える場合に必要になる場合があります。

于 2012-11-19T10:32:31.463 に答える
164

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

history.pushState({}, null, newUrl);
于 2015-06-10T18:25:35.763 に答える
116

注: HTML5 ブラウザを使用している場合は、この回答を無視してください。他の回答に見られるように、これが可能になりました。

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

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

于 2009-05-05T10:57:05.867 に答える
28

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

于 2012-11-21T11:09:02.650 に答える
24

ユーザーがページをブックマーク/共有できるようにすることで、正確に正しいURLである必要がなく、他の目的でハッシュアンカーを使用していない場合は、これを2つで行うことができます。部品; 場所を使用します。上記で説明したハッシュを実行してから、ホームページにチェックを実装して、ハッシュアンカーが含まれている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); }

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

于 2011-04-19T11:43:59.900 に答える
19

以下は、ページをリロードせずに 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');
于 2015-10-27T08:33:13.017 に答える
13

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

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

于 2009-05-05T10:58:53.303 に答える
11

アンカータグを追加できます。私は自分のサイトでこれを使用しているため、Google アナリティクスを使用して、ユーザーがページにアクセスした内容を追跡できます。

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

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);
于 2009-12-13T22:57:11.873 に答える
8

新しい URL。

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

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

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

ルートを確認できます: https://developer.mozilla.org/en-US/docs/Web/API/History_API

于 2020-07-18T06:34:31.907 に答える