URLに追加してページを更新


回答:


162

これは動作するはずです(テストされていません!)

var url = window.location.href;    
if (url.indexOf('?') > -1){
   url += '&param=1'
}else{
   url += '?param=1'
}
window.location.href = url;

1
str.search(regex)はsrt.indexOf(str2)よりも高速です
xavierm02

1
また、変数名とencodeURIComponent()を使用した変数パラメーターを使用して、空の例を示す必要があります。
xavierm02

また、> -1の場合は!== -1を使用する必要があります
xavierm02

8
これに続いて、パラメーターがURLに既に存在する場合、新しいパラメーターを追加するのではなく、その値を更新するというロジックをどのように追加できますか?
アマチュア

1
それは存在していた場合は、ここでそれを行う機能を見つけることができます@amateurこれは、URLをオフアンカー(ハッシュ値)を取る:stackoverflow.com/questions/486896/...
ダグ・モリノー

143

受け入れられた回答よりも短く、同じことを行いますが、シンプルに保ちます:

window.location.search += '&param=42';

URL全体を変更する必要はなく、場所の検索属性として知られるクエリ文字列のみを変更する必要があります。

検索属性に値を割り当てると、ブラウザによって疑問符が自動的に挿入され、ページが再ロードされます。


11
あなたは、これが唯一のパラメータになります知っている場合のために、あなたはまた、代わりにそれに追加の検索を設定することができますwindow.location.search = '?param=42';
デイブDuPlantis

1
よくやった!!正しい、最も単純で最適化された方法。受け入れられた答えでなければなりませんでした。
Rohit

URLがwww.mysite.comの場合はどうなりますか?それではURLは作成されません:www.mysite.com&param = 42これには "?"が必要になります これは、URLの唯一のパラメータであるためです。@Shlomi Komemiの回答は、これらの2つの主要なシナリオをカバーしているため、気に入っています。
greatKing 2017年

1
@greaterKingは、場所の検索属性にパラメーターを追加するときに、疑問符を追加します。ブラウザコンソールで試してください。
Bo Frederiksen

1
私の悪い@BoFrederiksenあなたは確かに正しい...それについて申し訳ありません。"+ =粗い...それを逃しました。私からの+1。
greatKing 2017年

70

ここでのほとんどの回答は、次のスニペットまたは同様のバリエーションのようなものをURLに追加する必要があることを示唆しています。

location.href = location.href + "&parameter=" + value;

これは、ほとんどの場合に問題なく機能します。

しかしながら

私の意見では、URLにパラメーターを追加する正しい方法ではありません。

提案されたアプローチは、パラメーターがURLに既に設定されているかどうかをテストしないため、注意しないと、同じパラメーターが複数回繰り返される非常に長いURLになる可能性があります。つまり:

https://stackoverflow.com/?&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1

この時点で問題が始まります。提案されたアプローチでは、複数のページの更新後に非常に長いURLが作成される可能性があり、そのためURLが無効になります。長いURLの詳細については、このリンクをたどってください。さまざまなブラウザーでのURLの最大長はいくつですか?

これは私の提案するアプローチです:

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

この関数を使用すると、次のことを実行する必要があります。

location.href = URL_add_parameter(location.href, 'param', 'value');

1
なぜ使用しないのか:if(window.location.search.indexOf('&param=') == -1) {window.location.search += '&param=1';}
538ROMEO

@SébastienGarcia-Roméoはい、これは興味深いアプローチであり、確かに有効ですが、関数がそのようにプログラムされている理由には2つあります。1.既存の重複するパラメーターを削除します。2.既存のパラメーターの値を上書きします。この観点からすると、の使用によりindexOf、コードに不必要な複雑さが導入される可能性があります。
yeyo 2016年


2
function gotoItem( item ){
    var url = window.location.href;
    var separator = (url.indexOf('?') > -1) ? "&" : "?";
    var qs = "item=" + encodeURIComponent(item);
    window.location.href = url + separator + qs;
}

より多くの互換バージョン

function gotoItem( item ){
    var url = window.location.href;    
    url += (url.indexOf('?') > -1)?"&":"?" + "item=" + encodeURIComponent(item);
    window.location.href = url;
}

1

以下のコードを確認してください:

/*Get current URL*/    
var _url = location.href; 
/*Check if the url already contains ?, if yes append the parameter, else add the parameter*/
_url = ( _url.indexOf('?') !== -1 ) ? _url+'&param='+value : _url+'?param='+value;
/*reload the page */
window.location.href = _url;

1

上記の@yeyoの思慮深い回答に対する1つの小さなバグ修正。

変化する:

var parameters = parser.search.split(/\?|&/);

に:

var parameters = parser.search.split(/\?|&amp;/);


そのような修正をコメントに投稿するか、提案して編集してください。彼らは別の答えを保証しません。
JJ for TransparencyおよびMonica

1

これを試して

var url = ApiUrl(`/customers`);
  if(data){
   url += '?search='+data; 
  }
  else
  { 
      url +=  `?page=${page}&per_page=${perpage}`;
  }
  console.log(url);

0

また:

window.location.href += (window.location.href.indexOf('?') > -1 ? '&' : '?') + 'param=1'

ブックマークレットで使用可能なShlomi回答の1つのライナー

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