現在のURLを変更するにはどうすればよいですか?


100

JavaScript内からページを変更する次のコードがあります。

var newUrl = [some code to build up URL string];
window.location.replace(newUrl);

ただし、トップURLは変更されないため、誰かが[戻る]ボタンをクリックしても、前のページには戻りません。

JavaScriptでトップURLも変更して、ブラウザの戻るボタンが機能するようにするにはどうすればよいですか。

回答:



38

への単純な割り当てwindow.locationまたは問題window.location.hrefないはずです:

window.location = newUrl;

ただし、新しいURLを使用するとブラウザは新しいページをロードしますが、現在のページを離れずにURLを変更したいようです。これには2つのオプションがあります。

  1. URLハッシュを使用します。たとえば、あなたがから行くことができますexample.comexample.com#foo新しいページをロードせず。window.location.hashこれを簡単に設定できます。次に、hashchangeユーザーが戻るボタンを押すと発生するHTML5 イベントをリッスンする必要があります。これは古いバージョンのIEではサポートされていませんが、すべてのブラウザーで動作するjQuery BBQを確認してください。

  2. HTML5履歴を使用すると、ページを再読み込みせずにパスを変更できます。これはあなたから変更することができますexample.com/fooexample.com/bar。これを使うのは簡単です:

    window.history.pushState("example.com/foo");

    ユーザーが「戻る」を押すと、ウィンドウのpopstateイベントが表示され、簡単に聞くことができます(jQuery):

    $(window).bind("popstate", function(e) { alert("location changed"); });

    残念ながら、これはChrome、Safari、Firefox 4ベータなどの最新のブラウザでのみサポートされています。


文字列の.replace方法は、それはそれは新しい文字列を生成します、に適用された文字列を変更しません「。 - window.location.replace()方法は同じではありませんString.prototype.replace()ので、方法window.location。文字列(それはオブジェクトの)ではない window.location.replace()電流を置き換えます履歴内の古いURLのエントリを上書きしながら、新しいURLを使用してURL
Andy E

1
訂正をありがとう、それに応じて私の答えを更新します。
bcherry

2
振り返ってみると、これは断然最良の答えです。document.location.hrefはpushStateに何もありません
buley

7

うーん、私は

window.location = 'http://localhost/index.html#?options=go_here';

それがあなたの言っていることかどうか、私には正確にはわかりません。


7

相対パスを更新したいだけの場合もできます

window.location.pathname = '/relative-link'

"http://domain.com" -> "http://domain.com/relative-link"


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.