Измените URL-адрес в браузере без загрузки новой страницы с помощью JavaScript

Question

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

Также было бы неплохо, если бы кнопка "Назад" перезагружала исходный URL.

Я пытаюсь записать состояние JavaScript в URL-адресе.

Answer 1

В HTML 5 используйте history.pushState функция.В качестве примера:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

и href:

<a href="#" id='click'>Click to change url to bar.html</a>

---

Если вы хотите изменить URL-адрес без добавления записи в список кнопок "Назад", используйте history.replaceState вместо этого.

Answer 2

Если вы хотите, чтобы это работало в браузерах, которые не поддерживают history.pushState и history.popState тем не менее, "старый" способ заключается в установке идентификатора фрагмента, который не вызовет перезагрузку страницы.

Основная идея состоит в том, чтобы установить window.location.hash присвойте значение, содержащее любую необходимую вам информацию о состоянии, затем либо используйте событие window.onhashchange, или для старых браузеров, которые не поддерживают onhashchange (Т.Е. < 8, Firefox < 3.6), периодически проверяйте, не изменился ли хэш (используя setInterval например) и обновите страницу.Вам также нужно будет проверить значение хэша при загрузке страницы, чтобы настроить начальный контент.

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

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

Answer 3

окно.Расположение.href содержит текущий URL-адрес.Вы можете читать из него, вы можете добавлять к нему дополнения и вы можете заменить его, что может привести к перезагрузке страницы.

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

Если вы используете ?вместо # вы принудительно перезагрузите страницу, но поскольку вы будете анализировать сохраненное состояние при загрузке, на самом деле это может не быть проблемой;и это также приведет к корректной работе кнопок "Вперед" и "Назад".

Answer 4

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

Возможно, если вы объясните, почему вы хотите это сделать, люди смогут предложить альтернативные подходы...

[Правка в 2011 году:С тех пор как я написал этот ответ в 2008 году, появилось больше информации относительно Технология HTML5 это позволяет изменять URL-адрес, если он имеет тот же источник]

Answer 5

Настройки безопасности браузера не позволяют пользователям напрямую изменять отображаемый URL-адрес.Вы можете себе представить, какие фишинговые уязвимости это вызовет.

Единственный надежный способ изменить URL-адрес без изменения страниц - это использовать внутреннюю ссылку или хэш.например ,: http://site.com/page.html становится http://site.com/page.html#item1 .Этот метод часто используется в hijax (AJAX + сохранение истории).

При выполнении этого я часто просто использую ссылки для действий с хэшем в качестве href, затем добавляю события click с помощью jquery, которые используют запрошенный хэш для определения и делегирования действия.

Я надеюсь, что это наставит вас на правильный путь.

Answer 6

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

JavaScript pushState и jQuery можно было бы использовать вместе, например:

history.pushState(null, null, $(this).attr('href'));

Пример:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

Используя только JavaScript history.pushState(), который изменяет реферер, который используется в заголовке HTTP для объектов XMLHttpRequest, созданных после изменения состояния.

Пример:

window.history.pushState("object", "Your New Title", "/new-url");

Метод pushState():

pushState() принимает три параметра:объект состояния, заголовок (который в данный момент игнорируется) и (необязательно) URL-адрес.Давайте рассмотрим каждый из этих трех параметров более подробно:

1. объект состояния — Объект состояния - это объект JavaScript, который связан с новой записью истории, созданной pushState().Всякий раз, когда пользователь переходит в новое состояние, запускается событие popstate, и свойство state события содержит копию объекта state записи истории.

   Объектом состояния может быть все, что может быть сериализовано.Поскольку Firefox сохраняет объекты состояния на диск пользователя, чтобы их можно было восстановить после перезапуска пользователем своего браузера, мы накладываем ограничение на размер в 640 тысяч символов для сериализованного представления объекта состояния.Если вы передаете объект состояния, сериализованное представление которого больше этого, в pushState(), метод выдаст исключение.Если вам нужно больше места, рекомендуется использовать sessionStorage и / или localStorage.

2. Название — Firefox в настоящее время игнорирует этот параметр, хотя может использовать его в будущем.Передача пустой строки здесь должна быть защищена от будущих изменений в методе.В качестве альтернативы, вы могли бы указать краткое название штата, в который вы переезжаете.

3. URL- АДРЕС — URL-адрес новой записи истории задается этим параметром.Обратите внимание, что браузер не будет пытаться загрузить этот URL-адрес после вызова pushState(), но он может попытаться загрузить URL-адрес позже, например, после того, как пользователь перезапустит свой браузер.Новый URL-адрес не обязательно должен быть абсолютным;если он относительный, то он разрешается относительно текущего URL-адреса.Новый URL-адрес должен иметь то же происхождение, что и текущий URL;в противном случае, pushState() выдаст исключение.Этот параметр является необязательным;если он не указан, для него устанавливается текущий URL-адрес документа.

Answer 7

Существует компонент Yahoo YUI (менеджер истории браузера), который может справиться с этим: http://developer .yahoo.com/yui/history/

Answer 8

Фотогалерея Facebook делает это, используя хэш # в URL-адресе.Вот несколько примеров URL-адресов:

Прежде чем нажать "Далее":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

После нажатия кнопки "Далее":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Обратите внимание на хэш-бан (#!), за которым сразу следует новый URL.

Answer 9

Есть плагин jquery http://www.asual.com/jquery/address/

Я думаю, это то, что вам нужно.

Answer 10

Что работает у меня, так это - history.replaceState() функция, которая заключается в следующем -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

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

Answer 11

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

Итак, допустим, пользователь находится на странице: http://domain.com/site/page.html Тогда браузер может позволить мне сделать location.append = new.html и страница становится: http://domain.com/site/page.htmlnew.html и браузер этого не меняет.

Или просто позвольте пользователю изменить параметр get, так что давайте location.get = me=1&page=1.

Таким образом, исходная страница становится http://domain.com/site/page.html?me=1&page=1 и это не обновляется.

Проблема с # заключается в том, что данные не кэшируются (по крайней мере, я так не думаю) при изменении хэша.Таким образом, это похоже на то, что каждый раз загружается новая страница, в то время как кнопки "назад" и "Вперед" в-Аякс страницы способны кэшировать данные и не тратят время на повторную загрузку данных.

Судя по тому, что я видел, программа Yahoo history уже загружает все данные сразу.Похоже, что он не выполняет никаких Ajax-запросов.Итак , когда div используется для обработки другого метода сверхурочно, чтобы данные не сохранялись для каждого состояния истории.

Answer 12

мой код таков:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

и действие:

setLocation('http://example.com/your-url-here');

и пример

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

Вот и все :)

Answer 13

Я добился успеха с:

location.hash="myValue";

Это просто добавляет #myValue к текущему URL-адресу.Если вам нужно вызвать событие при загрузке страницы, вы можете использовать то же самое location.hash чтобы проверить наличие соответствующего значения.Просто не забудьте удалить # из значения, возвращаемого location.hash например ,

var articleId = window.location.hash.replace("#","");

Answer 14

Я представляю более простой ответ,

window.history.pushState(null, null, "/abc")

это добавит /abc после доменного имени в URL-адресе браузера.Просто скопируйте этот код и вставьте его в консоль браузера и увидите, как URL меняется на "https://stackoverflow.com/abc"