- Что такое параметры URL
- HTMLHyperlinkElementUtils.search и location.search: получить строку параметров
- URLSearchParams: выделить параметр из строки, изменить его
- encodeURIComponent/decodeURIComponent, encodeURI/decodeURI: кодирование URL
- Как можно использовать параметры URL
- Псевдокласс
:target
(CSS)
Что это такое?
Параметры 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 запретить индексировать страницы прямо в Вебмастере.
Получить строку параметров из URL, href
ссылки, строки в JS
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
8 комментариев:
<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>