web-dev-qa-db-ja.com

更新せずにURLにパラメーターを追加

私はこれが以前に何度も尋ねられたことを知っていますが、答えは私の問題を解決するのに十分な説明ではありませんでした。ページのURL全体を変更したくありません。更新せずにボタンのクリック時にパラメータ&item=brandを追加したい。

document.location.search += '&item=brand';を使用すると、ページが更新されます。

window.location.hash = "&item=brand"; appendを使用し、更新せずにハッシュを使用して#を追加すると、パラメーターの使用/効果がなくなります。追加後にハッシュを削除しようとしましたが、うまくいきませんでした。

この回答 および他の多くはHTML5 History API、特にhistory.pushStateメソッドの使用を提案しています。古いブラウザーの場合、フラグメント識別子を設定してページの再読み込みを防止します。しかし、どのように？

URLが次の場合：http://example.com/search.php?lang=en

HTML5 pushStateメソッドまたはフラグメント識別子を使用して&item=brandを追加して、ページを更新せずにhttp://example.com/search.php?lang=en&item=brandのように出力するにはどうすればよいですか？

HTML5 pushStateを使用して既存/現在のURLにパラメーターを追加する方法について、誰かが光を放つことを願っています。または、同じ目的でフラグメント識別子を設定する方法。少し説明のある良いチュートリアル、デモ、またはコードの一部が素晴らしいでしょう。

デモ これまでやってきたことの。あなたの答えは大歓迎です。

javascriptjqueryhtml5pushstatehtml5-history
25
Mina Hafzalla

pushState または replaceState メソッドを使用できます。つまり：

window.history.pushState("object or string", "Title", "new url");

OR

window.history.replaceState(null, null, "/another-new-url");
52
Pedro Lobito

誰かがより複雑なURL（つまり、 https://stackoverflow.com/questions/edit?newParameter=1 ）にパラメーターを追加したい場合、次のコードが役に立ちました：

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

お役に立てれば！

10
pablobascones