добавить к URL и обновить страницу

134

Я хочу написать фрагмент javascript, который добавит параметр к текущему URL-адресу, а затем обновит страницу - как я могу это сделать?

любитель
источник
Самое оптимизированное решение, которое я нашел: stackoverflow.com/a/38792165/1783439
nu everest 01

Ответы:

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
И вы должны привести пример ull с именем переменной и параметром переменной с encodeURIComponent ().
xavierm02
И вместо> -1 вы должны использовать! == -1
xavierm02
8
один из последующих шагов, как можно добавить логику, согласно которой, если параметр уже существует в URL-адресе, я обновляю его значение, а не добавляю новый параметр?
любитель
1
это приведет к снятию якоря (хэш-значения) с URL-адреса, если он существует, @amateur вы можете найти функцию, которая делает это здесь: stackoverflow.com/questions/486896/…
Дуг Молайнукс
143

Короче принятого ответа, делается то же самое, но остается простым:

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

Нам не нужно изменять весь URL-адрес, только строку запроса, известную как атрибут поиска местоположения.

Когда вы присваиваете значение атрибуту поиска, браузер автоматически вставляет вопросительный знак и страница перезагружается.

Бо Фредериксен
источник
11
В случае, если вы знаете, что это будет единственный параметр, вы также можете установить поиск вместо добавления к нему:window.location.search = '?param=42';
Дэйв ДюПлантис 02
1
Прекрасная работа!! Правильный, самый простой и оптимизированный способ; должен был быть принятый ответ.
Rohit
Что, если ваш URL-адрес: www.mysite.com ... тогда он не сделает URL-адрес: www.mysite.com & param = 42, для которого потребуется знак "?" символ, поскольку это единственный параметр в URL-адресе. Мне нравится ответ @Shlomi Komemi, поскольку он охватывает эти 2 основных сценария.
greatKing
1
@greaterKing браузер добавляет знак вопроса при добавлении параметров в атрибут поиска местоположения. Попробуйте это в консоли вашего браузера.
Бо Фредериксен
1
Мой плохой @BoFrederiksen, ты действительно прав ... извини. "+ =" грубо ... пропустил это. +1 от меня.
greatKing
71

Большинство ответов здесь предполагают, что нужно добавить параметр (ы) к 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');
yeyo
источник
1
Почему бы просто не использовать:if(window.location.search.indexOf('&param=') == -1) {window.location.search += '&param=1';}
538ROMEO
@ SébastienGarcia-Roméo Да, это интересный подход, и он действительно действителен, однако есть две причины, почему функция запрограммирована таким образом. 1. Устранить существующие повторяющиеся параметры. 2. Чтобы перезаписать значение существующего параметра. С этой точки зрения, теперь использование indexOfможет внести в код ненужную сложность.
yeyo
3
location.href = location.href + "&parameter=" + value;
Пол Александр
источник
2
Дублирование параметров
Арун Прасад ES
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;
}
epascarello
источник
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;
Aftab
источник
1

Одно небольшое исправление ошибки для вдумчивого ответа @ yeyo выше.

Изменить:

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

Для того, чтобы:

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

Gabrien
источник
Публикуйте такие исправления в комментариях или предлагайте и редактируйте. Они не требуют отдельного ответа.
JJ для Transparency и Моника
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'

Всего лишь один лайнер с ответом Шломи можно использовать в букмарклетах

estani
источник