Параметры URL | JavaScript

Что это такое?

Параметры URL — это набор символов, следующих в конце адреса после символа ? (вопросительный знак) и до # (хэш-символ) при наличии 

http://shpargalkablog.ru/2016/09/url-parameters-js.html?a

Несколько параметров соединяются символом & (амперсанд) [w3.org] 

http://shpargalkablog.ru/2016/09/url-parameters-js.html?a&b&c

Параметр может иметь значение через символ = (равно) 

http://shpargalkablog.ru/2016/09/url-parameters-js.html?a=name&b=tel&c=number

Один параметр может иметь несколько значений, которые находятся в массиве. Для PHP имена таких параметров должны в конце содержать символы [] (квадратные скобки) [php.net] 

http://shpargalkablog.ru/2016/09/url-parameters-js.html?a[]=name1&a[]=name2&a[]=name3&b=tel&c=number

Страницы с разными параметрами в URL-адресе рассматриваются поисковыми системами как разные веб-документы (проиндексируются все 4-ре адреса) 

http://shpargalkablog.ru/2016/09/url-parameters-js.html
http://shpargalkablog.ru/2016/09/url-parameters-js.html?a
http://shpargalkablog.ru/2016/09/url-parameters-js.html?b
http://shpargalkablog.ru/2016/09/url-parameters-js.html?c

Чтобы их склеить, нужно чтобы основной URL был указан в качестве значения атрибута href тега <link> с атрибутом rel="canonical", расположенного внутри <head>. В исходном коде всех четырёх 

view-source:http://shpargalkablog.ru/2016/09/url-parameters-js.html
view-source:http://shpargalkablog.ru/2016/09/url-parameters-js.html?a
view-source:http://shpargalkablog.ru/2016/09/url-parameters-js.html?b
view-source:http://shpargalkablog.ru/2016/09/url-parameters-js.html?c
присутствует 
<link href='http://shpargalkablog.ru/2016/09/url-parameters-js.html' rel='canonical'/>

Если часть URL с параметрами должны быть в индексе, а часть — нет (например, при наличии параметров статистики), то можно Google запретить индексировать страницы прямо в Вебмастере.

location.search: строка параметров из URL-адреса

<button type="button" onclick="alert(location.search)">получить параметры</button>

<!-- См. window.location.search -->

HTMLHyperlinkElementUtils.search: строка параметров из атрибута href ссылки

Относительная ссылка 
<a href="/2010/09/postroenie-ssylok-v-html.html?raz=0#href-a" id="raz">Относительная ссылка</a>
<button type="button" onclick="alert(document.getElementById('raz').search)">получить параметры</button>

<!-- См. HTMLHyperlinkElementUtils.search [mozilla.org] -->

HTMLHyperlinkElementUtils.search: строка параметров из произвольной строки

<button type="button" id="raz1">получить параметры</button>

<script>
document.getElementById('raz1').onclick = function() {
  var url = new URL('http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html?raz=0#href-a'); // перевести строку в URL
  alert(url.search);
}
</script>

<!-- См. URL() [mozilla.org] -->

URLSearchParams: получить, добавить, удалить параметр URL или его значение

if ('URLSearchParams' in window) alert('есть контакт');
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number'); // создать объект URLSearchParams [mozilla.org]/[google.com], значение которого должено быть без знака вопроса
alert(params);

var url = new URL('http://shpargalkablog.ru/2016/09/url-parameters-js.html?a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number'),
      urlSearch = url.search.slice(1), // выделить из URL строку с параметрами и удалить первый символ
      params = new URLSearchParams(urlSearch);
alert(params);

var url = new URL('http://shpargalkablog.ru/2016/09/url-parameters-js.html?a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number'),
      urlSearch = url.search;
if (urlSearch.indexOf("?") == 0) urlSearch = urlSearch.slice(1); // удалить первый символ ? (вопросительный знак), если он существует
var params = new URLSearchParams(urlSearch);
alert(params);

var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
alert(Array.from(params).length); // перевести в массив
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
alert(params.toString());
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
for(var pair of params.entries()) {
  alert(pair + ' или по отдельности ' + pair[0] + ' и '  + pair[1]);
}
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
for(var key of params.keys()) {
  alert(key);
}
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number'),
      unique = Array.from(params.keys()).filter(function(e, i, arr) { // функция убирает повторы
        return arr.indexOf(e) == i;
      })
alert(unique + " или по отдельности " + unique[0] + " и " + unique[1] + " и " + unique[2]);
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
for(var value of params.values()) {
  alert(value);
}
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
alert(params.getAll('a[]') + " или по отдельности " + params.getAll('a[]')[0] + " и " + params.getAll('a[]')[1] + " и " + params.getAll('a[]')[2] + " и " + params.getAll('a[]')[3]);
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number'),
      a1 = params.getAll('a[]'),
      a2 = ['name1','name2','','name4'];
if (a1.length==a2.length && a1.every((v,i)=> v === a2[i])) alert('Совпало!'); // автор [stackoverflow.com]
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
alert(params.get('a[]'));
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
alert(params.get('d'));
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
var d = params.get('d') || "параметр отсутствует";
alert(d);
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
alert(params.has('a[]'));
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
params.append('с','new');
alert(params);
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
params.set('a[]','new');
alert(params);
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
params.set('a[]','new1');
params.append('a[]','new2');
params.append('a[]','new3');
alert(params);
// условие: заменить пустое значение параметра 'a[]' на 'new'

var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number'),
    p = 'a[]',
    a = params.getAll(p);
if (params.has(p)) {
  params.delete(p);
  for (var i=0; i<a.length; i++) {
    if(a[i] == '') {
      params.append(p,'new');
    }else{
      params.append(p,a[i]);
    }
  }
}
alert(params);
var params = new URLSearchParams('a[]=name1&a[]=name2&a[]&a[]=name4&b=tel&c=number');
params.delete('a[]');
alert(params);

Как закодировать и раскодировать URL

// для кодирования параметров

var params = encodeURIComponent('http://shpargalkablog.ru/2016/09/url-параметры+js.html'),
      url = 'http://shpargalkablog.ru/?url=' + params;
alert(url);

// результат: http://shpargalkablog.ru/?url=http%3A%2F%2Fshpargalkablog.ru%2F2016%2F09%2Furl-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B%2Bjs.html
// для кодирования параметров

var params = new URLSearchParams('url=http://shpargalkablog.ru/2016/09/url-параметры+js.html'),
      url = 'http://shpargalkablog.ru/?' + params;
alert(url);

// результат: http://shpargalkablog.ru/?url=http%3A%2F%2Fshpargalkablog.ru%2F2016%2F09%2Furl-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+js.html
// для кодирования всего URL

var url = encodeURI('http://shpargalkablog.ru/2016/09/url-параметры+js.html');
alert(url);

// результат: http://shpargalkablog.ru/2016/09/url-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+js.html
var decode = decodeURIComponent('http%3A%2F%2Fshpargalkablog.ru%2F2016%2F09%2Furl-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B%2Bjs.html');
alert(decode);

// результат: http://shpargalkablog.ru/2016/09/url-параметры+js.html
var decode = decodeURI('http%3A%2F%2Fshpargalkablog.ru%2F2016%2F09%2Furl-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B%2Bjs.html');
alert(decode);

// результат: http%3A%2F%2Fshpargalkablog.ru%2F2016%2F09%2Furl-параметры%2Bjs.html

Варианты применения параметров URL-адреса

Передать параметры из формы можно с помощью объекта new FormData в рамках new XMLHttpRequest() ([javascript.ru], полноценный пример). Менять адрес текущей страницы, изменяя параметры URL, можно с помощью Window.history [developer.mozilla.org], чтобы не перезагружать документ.

Смена содержимого страницы

Например, переходя по разным ссылкам, можно увидеть, что изначально помечены галочками разные чебоксы, раскрыты разные уровни дерева: 

http://shpargalkablog.ru/2013/08/checked.html?checked[]=21
http://shpargalkablog.ru/2013/08/checked.html?checked[]=1&checked[]=21&checked[]=33

Участок кода, который претерпел изменения: 

<form name="Tree1" class="treeHTML">
          <label><input type="checkbox" data-checked='1'> 1</label>
          <label><input type="checkbox" data-checked='2'> 2</label>
          <fieldset><legend></legend>
                    <label><input type="checkbox" data-checked='21'> 2.1</label>
                    <fieldset><legend></legend>
                              <label><input type="checkbox" data-checked='211'> 2.1.1</label>
                              <fieldset><legend></legend>
                                        <label><input type="checkbox" data-checked='2111'> 2.1.1.1</label>
                                        <label><input type="checkbox" data-checked='2112'> 2.1.1.2</label>
                                        <label><input type="checkbox" data-checked='2113'> 2.1.1.3</label>
                              </fieldset>
                              <label><input type="checkbox" data-checked='212'> 2.1.2</label>
                              <label><input type="checkbox" data-checked='213'> 2.1.3</label>
                    </fieldset>
                    <label><input type="checkbox" data-checked='22'> 2.2</label>
                    <label><input type="checkbox" data-checked='23'> 2.3</label>
                    <label><input type="checkbox" data-checked='24'> 2.4</label>
          </fieldset>
          <label><input type="checkbox" data-checked='3'> 3</label>
          <fieldset><legend></legend>
                    <label><input type="checkbox" data-checked='31'> 3.1</label>
                    <label><input type="checkbox" data-checked='32'> 3.2</label>
                    <label><input type="checkbox" data-checked='33'> 3.3</label>
          </fieldset>
</form>

<script>
var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll('fieldset'), function(eFieldset) {
  var main = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(element) {return element.parentNode.nextElementSibling == eFieldset;});
  main.forEach(function(eMain) {
    var l = [].filter.call(eFieldset.querySelectorAll('legend'), function(e) {return e.parentNode == eFieldset;});
    l.forEach(function(eL) {
      var all = eFieldset.querySelectorAll('[type="checkbox"]');
      eL.onclick = Razvernut;
      eFieldset.onchange = Razvernut;
      window.addEventListener('load', function() {  // при загрузки страницы установить атрибут checked у тех input, что указаны в параметре URL checked[]
        var urlPar = new URLSearchParams(location.search.slice(1));
        if (urlPar.has('checked[]')) {
          for(var i=0; i<urlPar.getAll('checked[]').length; i++)
            t.querySelector('[type="checkbox"][data-checked="'+urlPar.getAll('checked[]')[i]+'"]').checked = true;
          Razvernut('true');
        }
      });
      function Razvernut(load) {
        if(load == 'true') {  // если атрибут checked есть у input, стоящего выше по лестнице, то установить атрибут checked у как бы вложенных input
          var eCh0 = [].filter.call(t.querySelectorAll('fieldset [type="checkbox"]:not(:checked)'), function(element) {return element.parentNode.parentNode.previousElementSibling.firstElementChild.checked == true}); 
          for(var i=0; i<eCh0.length; i++)
            eCh0[i].checked = true;
        }
        var allChecked = eFieldset.querySelectorAll('[type="checkbox"]:checked').length;
        eMain.checked = allChecked == all.length;
        eMain.indeterminate = allChecked > 0 && allChecked < all.length;
        if (eMain.indeterminate || eMain.checked || ((eFieldset.className == '') && (allChecked == "0") && (load != 'true'))) {
          eFieldset.className = 'razvernut';
        } else {
          eFieldset.className = '';
        }
      }
      eMain.onclick = function() {
        for(var i=0; i<all.length; i++)
          all[i].checked = this.checked;
        if (this.checked) {
          eFieldset.className = 'razvernut';
        } else {
          eFieldset.className = '';
        }
      }
    });
  });
});
</script>

Сбор статистики

Можно более точно собирать статистику источников переходов на страницу, если сайтам А и Б предложить разные адреса ссылок и считать количество посетителей URL по отдельности (UTM метки) 

http://shpargalkablog.ru/2016/09/url-parameters-js.html?site=example1.ru
http://shpargalkablog.ru/2016/09/url-parameters-js.html?site=example2.ru
в f t
наверх ↑

8 комментариев:

Жизнь Идет
У меня вопрос немного не по теме. Может подскажите как сделать так чтобы при создании статьи они автоматически выходили со ссылками в твитере и др.соц сетях
NMitra
Некоторые сервисы позволяют добавлять RSS ленту. В Feedburner есть кнопка, активировав которую в твитер будет уходить анонс http://shpargalkablog.ru/2010/07/zarabotok-na-rss-s-nulya.html#feedburner Для кросспостинга в Facebook есть приложения. Я давно этой темой не интересовалась, может что поменялось.
BlogAdmin
Наталия! Извините, что не по теме, скажите пожалуйста, как вам удалось убрать внешние ссылки из комментариев, читал вашу статью (shpargalkablog.ru/2010/11/zapretit-indeksirovat-kommentarii.html), но там нужно переключить на не древовидные, что сейчас не выходит. Огромное спасибо!
NMitra
Попробуйте запретить канал комментариев http://shpargalkablog.ru/2010/10/comments-blogger.html#otvet
BlogAdmin
NMitra, пробовал не получается. Как отключить древовидные комментарии в современном варианте Блоггера? Спасибо!
NMitra
Других вариантов я не знаю - у меня везде по умолчанию без древовидных идёт.
NMitra
Попробуйте привести к коду

<b:includable id='comment_picker' var='post'/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
NMitra
Подчищайте из кода всё, что связано с threaded-comment (только резервную копию делайте).