agregar a la URL y actualizar la página


Respuestas:


162

Esto debería funcionar (¡no probado!)

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

1
str.search (regex) es más rápido que srt.indexOf (str2)
xavierm02

1
Y debe dar un ejemplo ull con un nombre de variable y un parámetro de variable con encodeURIComponent ().
xavierm02

Y en lugar de> -1, deberías usar! == -1
xavierm02

8
un seguimiento de esto, ¿cómo puede agregar algo de lógica que si el parámetro ya existe en una URL actualizo su valor en lugar de agregar un nuevo parámetro?
aficionado

1
esto eliminará el ancla (valor hash) de la url, si existiera, @amateur puede encontrar una función que hace eso aquí: stackoverflow.com/questions/486896/…
Doug Molineux

143

Más corto que la respuesta aceptada, haciendo lo mismo, pero manteniéndolo simple:

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

No tenemos que alterar la url completa, solo la cadena de consulta, conocida como el atributo de búsqueda de ubicación.

Cuando asigna un valor al atributo de búsqueda, el navegador inserta automáticamente el signo de interrogación y la página se vuelve a cargar.


11
Para un caso en el que sabe que este será el único parámetro, también puede configurar la búsqueda en lugar de agregarlo:window.location.search = '?param=42';
Dave DuPlantis

1
¡¡Gran trabajo!! La forma correcta, más simple y optimizada; debería haber sido la respuesta aceptada.
Rohit

¿Qué sucede si su url es: www.mysite.com ... entonces no será la url: www.mysite.com & param = 42 que necesitaría el "?" carácter ya que es el único parámetro en la url. Me gusta la respuesta de @Shlomi Komemi, ya que cubre esos 2 escenarios principales.
GreaterKing

1
@greaterKing el navegador agrega el signo de interrogación, al agregar parámetros al atributo de búsqueda de ubicación. Pruébelo en la consola de su navegador.
Bo Frederiksen

1
Mi malo @BoFrederiksen, de hecho, tienes razón ... lamenta eso. "+ =" de grosero ... perdí eso. +1 de mi parte
GreaterKing

70

La mayoría de las respuestas aquí sugieren que uno debe agregar los parámetros a la URL, algo así como el siguiente fragmento o una variación similar:

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

Esto funcionará bastante bien para la mayoría de los casos.

sin embargo

En mi opinión, esa no es la forma correcta de agregar un parámetro a una URL.

Debido a que el enfoque sugerido no prueba si el parámetro ya está configurado en la URL, si no tiene cuidado, uno puede terminar con una URL muy larga con el mismo parámetro repetido varias veces. es decir:

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

en este punto es donde comienzan los problemas. El enfoque sugerido podría y creará una URL muy larga después de varias actualizaciones de página, lo que invalidará la URL. Siga este enlace para obtener más información sobre una URL larga. ¿Cuál es la longitud máxima de una URL en diferentes navegadores?

Este es mi enfoque sugerido:

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

Con esta función solo tendrá que hacer lo siguiente:

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

1
¿Por qué no solo usar:if(window.location.search.indexOf('&param=') == -1) {window.location.search += '&param=1';}
538ROMEO

@ SébastienGarcia-Roméo Sí, ese es un enfoque interesante, y de hecho válido, sin embargo, hay dos razones por las cuales la función está programada de esa manera. 1. Eliminar los parámetros duplicados existentes. 2. Para sobrescribir el valor de un parámetro existente. Desde este punto de vista, ahora el uso de indexOfpodría introducir una complejidad innecesaria en el código.
yeyo


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

Más versión compatible

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

1

Por favor revise el siguiente código:

/*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

Una pequeña corrección de error para la reflexiva respuesta de @ yeyo arriba.

Cambio:

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

A:

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


Publique tales correcciones en un comentario o proponga y edite. No garantizan una respuesta por separado.
JJ por Transparencia y Mónica

1

Prueba esto

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

0

También:

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

Solo una respuesta de Shlomi utilizable en marcadores

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.