77

ページをリロードせずにプログラムでURLを更新する方法はありますか？

編集：投稿のタイトルに何かを追加しました。ページをリロードしたくないことを明確にしたいだけです。

4

10 に答える 10

93

はいといいえ。すべての一般的なWebブラウザには、それを防ぐためのセキュリティ対策があります。目標は、人々がWebサイトのレプリカを作成するのを防ぎ、URLを変更して正しく見えるようにし、人々をだまして情報を入手できるようにすることです。

ただし、一部のHTML5互換Webブラウザーには、必要なものと同様の目的で使用できるHistoryAPIが実装されています。

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

私はテストしました、そしてそれはうまくいきました。ページをリロードしませんが、URLクエリを変更することしかできません。プロトコルまたはホストの値を変更することはできません。

詳細については：

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

于 2013-10-09T17:56:18.673 に答える
39

はい -document.location = "http://my.new.url.com"

同じ方法で取得することもできます。

var myURL = document.location;
document.location = myURL + "?a=parameter";

ロケーションオブジェクトには、いくつかの便利なプロパティもあります。

hash            Returns the anchor portion of a URL
host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

編集： document.locationのハッシュを設定すると、ページがリロードされないようにする必要があります。ページのどこにフォーカスがあるかを変更するだけです。したがって、に更新すると、。#myIdを含む要素にスクロールしid="myId"ます。存在しない場合idは何も起こらないと思いますか？（ただし、さまざまなブラウザで確認する必要があります）

EDIT2：明確にするために、コメントだけでなく：ページを変更せずにJavaScriptでURL全体を更新することはできません。これはセキュリティ上の制限です。それ以外の場合は、Gmailのように作成されたランダムなページへのリンクをクリックし、URLをwww.gmail.comに即座に変更して、ユーザーのログイン情報を盗むことができます。
一部のブラウザでは、ドメインの後の部分を変更してAJAXスタイルのものに対処できますが、それはすでにOsirisによってリンクされています。さらに、できたとしても、おそらくこれを行うべきではありません。URLは、ユーザーがサイトのどこにいるかを示します。ページの内容を変更せずに変更すると、少し混乱します。

于 2012-09-20T07:53:31.923 に答える
7

あなたが使用することができます：

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)
于 2015-12-26T19:17:13.447 に答える
5

使用する

window.history.replaceState（{}、document.title、updatedUri）;

ページをリロードせずにURLを更新するには

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

ページをリロードせずにクエリ文字列を削除するには

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}
于 2018-03-26T13:48:53.860 に答える
4

新しいURLオブジェクトを定義し、それに現在のURLを割り当て、そのURLオブジェクトにパラメーターを追加して、最後にブラウザーの状態にプッシュします。

var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);
于 2018-04-04T00:22:31.543 に答える
3

はい

document.locationが通常の方法です。

ただし、document.locationは実質的にwindow.locationと同じですが、window.locationは古いブラウザでもう少しサポートされているため、好ましい選択である可能性があります。

詳細については、SOのこのスレッドをチェックしてください。

JavaScriptのwindow.locationとdocument.locationの違いは何ですか？

于 2012-09-20T07:58:17.153 に答える
1

リダイレクトを回避するために、プレフィックスURLの変更にハッシュタグを付けます。

これはリダイレクトします

location.href += '&test='true';

これはリダイレクトされません

location.href += '#&test='true';
于 2016-09-27T16:41:19.610 に答える
0

プレーンJavaScript：document.location ='http://www.google.com';

ただし、これによりブラウザが更新されます。ページをリロードせずに何らかの閲覧履歴を実装するためにURLを更新する必要がある場合は、ハッシュの使用を検討してください。その場合は、jQuery.hashchangeを調べることをお勧めします。

于 2012-09-20T07:56:35.983 に答える
0

より具体的にする必要があります。「URLを更新する」とはどういう意味ですか？別のページに自動的に移動することを意味する場合がありますが、これは確かに可能です。

ページをリロードせずにアドレスバーの内容を更新するだけの場合は、ページをリロードせずにURLを変更するを参照してください。

于 2012-09-20T07:59:04.167 に答える
-3

はい-document.location.hashクエリの場合

于 2012-09-20T07:55:00.610 に答える