Как записать в браузере событие нажатия кнопки «назад» / «вперед» или событие изменения хэша в javascript? - PullRequest
Новая
       29

Как записать в браузере событие нажатия кнопки «назад» / «вперед» или событие изменения хэша в javascript?

8 голосов
/ 21 ноября 2011

Я хочу alert(), когда браузер нажимает кнопку «назад» или «вперед» или хэш изменяется в javascript. Я пробовал это решение, и оно работает, но оно вызывает проблемы на других ссылках на веб-странице и отправляет каждый запрос дважды при любом событии щелчка ссылки.

Есть ли решение, чтобы захватить его без использования функции setInterval()? Так что мне нужно захватить изменение хеша или назад / вперед событие нажатия кнопки? Мне нужен простой код / ​​функция / свойство javascript, который должен работать во всех современных браузерах.

Есть решение?

Спасибо

Ответы [ 4 ]

13 голосов
/ 21 ноября 2011

Не очень хорошая идея

Можете ли вы объяснить причины этого? Мы все пошли по этому пути, предотвращая перемотки вперед / назад и тому подобное и искажая функциональность браузера.

Оказывается, лучше подчиниться браузеру и написать свое приложение таким образом, чтобы эти вещи стали неактуальными. Также верно и то, что браузеры все больше и больше блокируют клиентские приложения javascript, поэтому весьма вероятно, что ваше приложение потерпит неудачу после (нескольких) обновлений браузера.

Перейти с HTML5

HTML5 History spec может быть именно тем, что вы ищете. Это то, как все должно работать и работать с приложениями Ajax и функциями браузера вперед / назад. Я предлагаю вам проверить это. Посмотрите рабочую демонстрацию , которая делает это довольно хорошо.

4 голосов
/ 18 июля 2012

Я полагаю, что это ответ, который искал Роберт Коритник, я нашел его здесь: https://developers.google.com/tv/web/articles/location-hash-navigation

Существует событие (window.onhashchange), которое срабатывает всякий раз, когда хэш местоположения был обновлен или изменен так,все, что вам нужно сделать, это настроить обработчик событий, используя JavaScript для прослушивания этого события и выполнения кода на основе хэша.Это в основном то, как это делается: 

function getLocationHash() {
  return window.location.hash.substring(1);
}
window.onhashchange = function(e) {
  switch(getLocationHash()) {
    case 'state1': 
      execute code block 1;
      break;
    case 'state2':
      execute code block 2;
      break;
    default: 
      code to be executed if different from case 1 and 2;
  }
}

У меня это работает на моем сайте: http://www.designhandler.com

Все это динамически изменяемое содержимое.Еще нет ajax, но когда я закончу это будет.Я все еще использую window.location.hash для отслеживания состояний сайта.Если вы перемещаетесь по сайту, а затем начинаете использовать кнопки «Назад», чтобы перемещаться после того, как сайт вошел в историю, он будет динамически менять состояния, как если бы пользователь действительно нажимал навигацию, а не нуждался в перезагрузке страницы после этого.

3 голосов
/ 21 ноября 2011

Это для хэша или для перенаправления?Что ты пытаешься сделать?Подобные действия обычно очень навязчивы.

Вы можете попробовать событие "onbeforeunload" для этого JavaScript перед тем, как покинуть страницу

Отредактировано

На самом деле, ссылка, которую вы предоставляете, является довольно точной. 

var hash = location.hash;

setInterval(function()
{
   if (location.hash != hash)
   {
       hashUpdatedEvent(hash);
   }
}, 100);

function hashUpdatedEvent(hash)
{
     switch(...);
}

Ваша проблема с дублированием действий будет исправлена, если вы измените 

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   doWhatever();
   location.hash = 'somethingwasdone';
}

function hashUpdatedEvent(hash)
{
     if(hash == 'somethingwasdone')
     {
         doWhatever();
     }
}

Просто (обновите хеш и дайте«событие» обрабатывает действие): 

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   location.hash = 'somethingwasdone';
}

function hashUpdatedEvent(hash)
{
     if(hash == 'somethingwasdone')
     {
         doWhatever();
     }
}
1 голос
/ 08 мая 2018

Javascript предоставляет событие popstate для захвата события нажатия кнопки назад / вперед браузера - 

window.addEventListener("popstate", function(e) { 
  // if a back or forward button is clicked, do whatever, like alert or anything

  console.log('href => ', e.path[0].location.href);
  // href =>  https://testdomain.com/demos/material/admin-app/#!/app/dashboard

  console.log('hash => ', e.path[0].location.hash);
  //hash =>  #!/app/dashboard

  console.log('pathname => ', e.path[0].location.pathname);
  //pathname =>  /demos/material/admin-app/

});

Подробнее о popstate

...