anexar ao URL e atualizar a página

134

Estou olhando para escrever um pedaço de javascript que acrescentará um parâmetro ao URL atual e, em seguida, atualizará a página - como posso fazer isso?

amador
fonte
A solução mais otimizada que encontrei: stackoverflow.com/a/38792165/1783439
nu everest

Respostas:

162

isso deve funcionar (não testado!)

var url = window.location.href;    
if (url.indexOf('?') > -1){
   url += '&param=1'
}else{
   url += '?param=1'
}
window.location.href = url;
Shlomi Komemi
fonte
1
str.search (regex) é mais rápido que srt.indexOf (str2)
xavierm02
1
E você deve dar um exemplo de ull com um nome de variável e um parâmetro de variável com encodeURIComponent ().
Xavierm02
E, em vez de> -1, você deve usar! == -1
xavierm02
8
Em seguida, como adicionar uma lógica de que, se o parâmetro já existe em uma URL, atualizo seu valor em vez de adicionar um novo parâmetro?
Amador
1
isso vai levar a âncora (valor de hash) fora da url, se existisse, @amateur pode encontrar uma função que faz isso aqui: stackoverflow.com/questions/486896/...
Doug Molineux
143

Menor que a resposta aceita, fazendo o mesmo, mas mantendo-o simples:

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

Não precisamos alterar o URL inteiro, apenas a string de consulta, conhecida como atributo de pesquisa do local.

Quando você atribui um valor ao atributo de pesquisa, o ponto de interrogação é inserido automaticamente pelo navegador e a página é recarregada.

Bo Frederiksen
fonte
11
Para um caso em que você sabe que esse será o único parâmetro, você também pode definir a pesquisa em vez de anexá-lo:window.location.search = '?param=42';
Dave DuPlantis 02 /
1
Bom trabalho!! A maneira correta, mais simples e otimizada; deveria ter sido a resposta aceita.
Rohit
E se o seu URL for: www.mysite.com ... então ele não será o URL: www.mysite.com & param = 42 que precisaria do "?" caractere, já que é o único parâmetro no URL. Eu gosto da resposta da @Shlomi Komemi, pois abrange esses dois cenários principais.
greaterKing
1
@governar o navegador adiciona o ponto de interrogação ao adicionar parâmetros ao atributo de pesquisa do local. Experimente no console do seu navegador.
Bo Frederiksen
1
Meu mau @BoFrederiksen você está realmente correto ... srry sobre isso. "+ =" de grosso ... perdeu isso. +1 de mim.
usar o seguinte comando
70

A maioria das respostas aqui sugere que se deve anexar o (s) parâmetro (s) ao URL, algo como o seguinte snippet ou uma variação semelhante:

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

Isso funcionará muito bem para a maioria dos casos.

Contudo

Essa não é a maneira correta de anexar um parâmetro a um URL na minha opinião.

Como a abordagem sugerida não testa se o parâmetro já está definido na URL, se não for cuidadoso, pode-se acabar com uma URL muito longa com o mesmo parâmetro repetido várias vezes. ou seja:

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

neste ponto é onde os problemas começam. A abordagem sugerida pode e criará um URL muito longo após várias atualizações de página, tornando o URL inválido. Siga este link para obter mais informações sobre URL longo Qual é o tamanho máximo de um URL em diferentes navegadores?

Esta é minha abordagem sugerida:

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;
}

Com esta função, basta fazer o seguinte:

location.href = URL_add_parameter(location.href, 'param', 'value');
yeyo
fonte
1
Porque não basta usar:if(window.location.search.indexOf('&param=') == -1) {window.location.search += '&param=1';}
538ROMEO
@ SébastienGarcia-Roméo Sim, essa é uma abordagem interessante e, de fato, válida, no entanto, existem duas razões pelas quais a função é programada dessa maneira. 1. Para eliminar os parâmetros duplicados existentes. 2. Para substituir o valor de um parâmetro existente. Desse ponto de vista, agora o uso de indexOfpode introduzir complexidade desnecessária no código.
yeyo
3
location.href = location.href + "&parameter=" + value;
Paul Alexander
fonte
2
Parâmetros que estão sendo duplicados
Arun Prasad ES 30/05
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;
}

Versão mais compat

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

Verifique o código abaixo:

/*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;
Aftab
fonte
1

Uma pequena correção de erro para a resposta pensativa de @ yeyo acima.

Mudança:

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

Para:

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

Gabrien
fonte
Poste essas correções em um comentário ou proponha e edite. Eles não justificam uma resposta separada.
JJ for Transparency e Monica
1

Tente isto

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

Além disso:

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

Apenas uma linha de resposta Shlomi utilizável em bookmarklets

estani
fonte