Введение

Для кнопки "Назад" и "Далее" веб-браузеры оснащены могут быть использованы на веб-сайт, содержимое которого загружаются асинхронно, нужно обрабатывать история просмотра самого браузера.

Таким образом, что, фактически, позволяет проводить этот вид обработки без обновления страницы (refresh), через использование hash локализации.

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

Потребностями

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

• Читать: Собирать и обрабатывать значения hash в текущем местоположении;
• Написания: Обновите hash в текущем местоположении с нужным значением;
• Прослушивания: Определить, когда было проведено изменение hash, и действовать соответственно.

Давайте посмотрим, как справиться с каждым из этих требований:

• Читать

  , Собирайте hash расположение

  Читать hash текущего местоположения, мы можем использовать JavaScript и прочитать значение свойства window.location.hash. Первый символ будет всегда индикатор хэш #, что может быть удален.

  // ler valor e "cortar" o primeiro caractere
  var hashValue = window.location.hash.substring(1);
  

  , вопросов эффективности, давайте создадим функцию, для лечения этого действия:

  /**
   * Devolve a hash da localização actual
   * @return {string} Valor da Hash com prefixo '#' ignorado.
   */
  function lerHash () {
    return window.location.hash.substring(1);
  }
  

• Писать

  Вводе значения в hash расположение

  Обновлять hash текущее местоположение отеля браузер программными средствами, мы обратились снова в JavaScript и свойства window.location.hash:

  // atribuir valor à hash
  window.location.hash = 'pagina2';
  

  , Еще раз, для большей эффективности, давайте создадим функцию, для лечения этого действия:

  /**
   * Actualiza a hash da localização actual com o valor facultado
   * @param {string} str
   */
  function escreverHash(str) {
    window.location.hash = str;
  }
  

• Прослушивание

  Прослушивание и обнаружить изменения в hash текущее местоположение браузер

  Браузер удобно запускает событие всякий раз, когда hash текущее местоположение обновлен или изменен. Для того, чтобы быть начеку это обновление и despoletarmos действие по новое значение, присвоенное, мы просто должны настроить обработчик событий с помощью JavaScript, чтобы слушать это событие:

  /**
   * Escuta alterações na hash da localização actual.
   * @param {Event} e HashChangeEvent object
   */
  window.onhashchange = function(e) {
    // Fazer algo quando existe uma alteração de valor
    // ...
  };
  

Пользой hash, чтобы разрешить состоянии "постоянных" на веб -

, Чтобы понимать немного, как все работает за кулисами, давайте рассмотрим следующую схему:

• Последовательность действий: Цвет Красный

  , Здесь показано,-нормальное поведение браузера, без выполнения требований, которые мы видели выше:

  • Пользователь взаимодействует со страницей;
  • страницу обновлении hash, чтобы открыть новую запись в журнал посещений;
  • update hash вызывает появление события, что, в свою очередь, будет вызывать функцию манипулятивных;
  • манипулятивной Функции ничего не делает.

• Последовательности действие B: Зеленый Цвет

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

  • обновлении адреса в браузере или обратиться к нашим кнопки "Назад/Вперед" из собственного браузера;
  • update hash вызывает появление события, что, в свою очередь, будет вызывать функцию манипулятивных;
  • манипулятивной Функции будет выполнять функции нашей обновите страницу;
  • обновлении Страницы и больше ничего не происходит (нет refresh).

Практическом Примере

^{Как на свой вопрос не у вас нет кода, чтобы лучше проиллюстрировать твой сценарий, практически, к любой ответ на твой случай, в частности, находится здесь общий пример.}

В Этом примере веб-страницы, имитирует вставки содержимого с помощью Ajax и обрабатывает элементы, которые будут представлены пользователю, в то время как идет создание новых записей в история местоположений браузера, чтобы использовать кнопки "Назад" или "Вперед", не вызывая обновление (refresh):

<!doctype html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Exemplo de navegação sem actualização da página</title>
    </head>
    <body>
      <nav>
        <ul>
          <li id="pagina1">
            Página 01
          </li>
          <li id="pagina2">
            Página 02
          </li>
          <li id="pagina3">
            Página 03
          </li>
          <li id="pagina4">
            Página 04
          </li>
        </ul>
      </nav>
      <section>
        Olá, bem vindo à Página 01!
      </section>

      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

      <script type="text/javascript">

        function cumprimenta(pagina){

          $('section').delay(100).html( "Olá, bem vindo à " + $('#'+pagina).html() );

          $('nav li').css("color", "black");
          $this.css("color", "green");
        }

        function oraBolas() {
          $('section').delay(100).html( "Existe qualquer coisa de errado!" );
        }

        /**
         * Escuta alterações na hash da localização actual.
         * @param {Event} e HashChangeEvent object
         */
        window.onhashchange = function(e) {

          var pagina = lerHash();

          // aqui chama-se função X mediante o valor da variável "pagina"

          if (pagina.length==7)
            cumprimenta(pagina);
          else
            oraBolas();
        };

       /**
        * Actualiza a hash da localização actual com o valor facultado
        * @param {string} str
        */
       function escreverHash(str) {
         window.location.hash = str;
       }

       /**
        * Devolve a hash da localização actual
        * @return {string} Valor da Hash com prefixo '#' ignorado.
        */
       function lerHash () {
         return window.location.hash.substring(1);
       }

       $(function() {

         $('nav').on("click", 'li', function (e) {
           e.preventDefault();
           escreverHash($(this).attr("id"));
         });
       });
     </script>
   </body>
</html>

Завершения

Таким образом, , манипулируя hash, можете навигации соответствует всем веб-сайт, либо путем использования ссылки, присутствующие на странице в настоящее время отображается на экране, либо использовать стрелки "Назад" и "Далее", самого браузера.

, работа вся осуществляется слушателя события изменения hash, где здесь должен быть вызов соответствующих функций, которые будут вызывать поведение или изменений.

Я Думаю, что удастся решить таким образом две проблемы в вопросе:

• Направить посетителя в определенной области без refresh;
• Гарантировать, что, если посетитель использовать стрелки навигации, имеющихся в собственный браузер, веб-сайт поможет вам представить страницу предыдущей далее как и ожидалось, опять без refresh.