Как изменить параметр в URL-адресе без перезагрузки страницы? [dубликат]

В современных браузерах и HTML5 существует метод, называемый pushState в окне history . Это изменит URL-адрес и перенесет его в историю без загрузки страницы.

Вы можете использовать ее следующим образом: она будет принимать 3 параметра: 1) объект состояния 2) название и URL-адрес):

  window.history.pushState ({page: "another"}, "another page", "example.html");   

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

Также есть history.replaceState () , который делает точно то же самое, за исключением того, что он изменит текущую историю вместо создания новой!

Также вы можете создать функцию для проверки существования history.pushState, а затем продолжить с остальными:

  function goTo (страница, заголовок, URL) {if ("  undefined "! == typeof history.pushState) {history.pushState ({page: page}, title, url);  } else {window.location.assign (url);  }} goTo («другая страница», «пример», «example.html»);   

Также вы можете изменить # для браузеров & lt; HTML5 , которые не будут перезагружать страницу, таким образом Угловой использовать SPA в соответствии с hashtag ...

Изменение # довольно легко, делая:

  window.location.hash = "example";   

, и вы можете обнаружить его следующим образом:

  window.onhashchange = function () {console.log ("# changed", window.location.  хэш);  }  

Как указано Thomas Stjernegaard Jeppesen, вы можете использовать History.js для изменения параметров URL, пока пользователь перебирает ваши ссылки и приложения Ajax.

С тех пор прошло почти год, и History.js рос и стал более стабильным и кросс-браузерным. Теперь его можно использовать для управления состояниями истории в HTML5-совместимом, а также во многих браузерах с поддержкой HTML4. В этой демонстрации Вы можете увидеть пример того, как она работает (а также возможность попробовать свои функциональные возможности и ограничения.

Если вам нужна какая-либо помощь в использовании и реализации эта библиотека, я предлагаю вам взглянуть на исходный код демонстрационной страницы: вы увидите, что это очень легко сделать.

Наконец, для подробного объяснения того, что может быть связано с использованием хэшей (и hashbangs), проверьте эту ссылку by Benjamin Lupton.

Вы также можете использовать HTML5 replaceState, если хотите изменить URL-адрес, но не хотите добавлять запись в историю браузера:

  if (window.history.replaceState) {/  / запрещает браузеру сохранять историю с каждым изменением: window.history.replaceState (указано, название, URL);  }  

Это сломает функциональность кнопки «Назад». Это может потребоваться в некоторых случаях, например, в галерее изображений (где вы хотите, чтобы обратная кнопка возвращалась обратно на индексную страницу галереи, вместо того чтобы перемещаться по каждому просматриваемому изображению), предоставляя каждому изображению свой собственный уникальный URL-адрес.

Любые изменения loction (либо window.location , либо document.location ) вызовут запрос на этот новый URL-адрес, если вы не просто меняете URL-адрес фрагмент. Если вы измените URL-адрес, вы измените URL-адрес.

Используйте методы перезаписи URL-адресов на стороне сервера, такие как mod_rewrite от Apache , если вам не нравятся URL-адреса, которые вы используете в настоящее время.

Вот мое решение: (newUrl - ваш новый url, который вы хотите заменить текущим)

  history.pushState ({}, null, newUrl);   

Предполагая, что вы не пытаетесь сделать что-то злонамеренное, все, что вы хотели бы сделать с вашими собственными URL-адресами, может быть запущено с помощью htaccess .

Используйте window.history.pushState («object or string», «Title», «/ new-url») , но он по-прежнему отправляет новый запрос url на сервер

HTML5 представил методы history.pushState () и history.replaceState () , которые позволяют добавлять и изменять записи истории соответственно.

  window.history.pushState ('page2', 'Title', '/page2.php');   

Подробнее об этом читайте здесь здесь

  parent.location.hash = "hello";   

До HTML5 мы можем использовать:

  parent.location.hash = "hello";   

и:

  window.location.replace ("http: www.example.com");   

Этот метод перезагрузит вашу страницу, но HTML5 представил history.pushState (page, caption, replace_url) , который не должен перезагружать вашу страницу.

Используйте history.pushState () из HTML 5 History API

ссылайтесь на ссылку для более подробной информации API истории HTML5

Если то, что вы пытаетесь сделать, это позволить пользователям добавлять закладки / обмениваться страницами, и вам не нужно, чтобы это был именно правильный URL-адрес, и вы не используете хеш-привязки для чего-либо еще, тогда вы можете сделать это в двух частях; вы используете описанное выше location.hash, а затем реализуете проверку на домашней странице, чтобы искать URL-адрес с хеш-якорем в нем и перенаправлять вас на последующий результат.

Например: [ ! d7]

1) Пользователь находится на www.site.com/section/page/4

2) Пользователь выполняет какое-либо действие, которое изменяет URL-адрес на www.site.com/#/section/page/6 (с хешем). Скажем, что вы загрузили правильный контент для страницы 6 на страницу, поэтому, помимо хэша, пользователь не слишком обеспокоен.

3) Пользователь передает этот URL кому-то другому или заносит в закладки

4) Кто-то другой или тот же пользователь в более поздний срок переходит к www.site.com / # / section / page / 6

5) Код на www.site.com / перенаправляет пользователя на www.site.com/section/page/6 , используя что-то вроде этого:

   if (window.location.hash.length & gt; 0) {window.location = window.location.hash.substring (1);  }  

Надеюсь, это имеет смысл! Это полезный подход для некоторых ситуаций.

Возможно, без использования хэшей, посмотрите на asual jQuery Address plugin :

Пример здесь .

Обратите внимание, что он будет использовать хэши в IE, для этого нет обходного пути.

Вы можете добавить метки привязки. Я использую это на своем сайте http://www.piano-chords.net/ , чтобы отслеживать с помощью Google Analytics, что люди посещают на странице. Я просто добавляю тег привязки, а затем часть страницы, которую я хочу отслеживать.

  var trackCode = "/ #" + urlencode ($ ("myDiv"). Text ());  window.location.href = "http://www.piano-chords.net" + trackCode;  pageTracker._trackPageview (trackCode);   

Ниже приведена функция изменения URL-адреса без перезагрузки страницы. Он поддерживает только функцию HTML5

  ChangeUrl (page, url) {if (typeof (history.pushState)! = "Undefined") {var obj = {Страница: page, Url: url}  ;  history.pushState (obj, obj.Page, obj.Url);  } else {window.location.href = "homePage";  // alert ("Браузер не поддерживает HTML5.");  }} ChangeUrl ('Страница1', 'homePage');   

HTML5 replaceState - это ответ, как уже упоминалось Vivart и geo1701. Однако он не поддерживается во всех браузерах / версиях. History.js обертывает функции состояния HTML5 и предоставляет дополнительную поддержку браузерам HTML4.