изменение window.location.hash создает запись в истории, но не влияет на кнопку возврата Chrome - PullRequest
Новая
       97

изменение window.location.hash создает запись в истории, но не влияет на кнопку возврата Chrome

0 голосов
/ 27 сентября 2019

Я пытаюсь показать успешное всплывающее окно после загрузки страницы, и если пользователь нажимает кнопку возврата Android (что в данном случае эквивалентно кнопке возврата браузера), я хочу закрыть только всплывающее окно (не хочу перенаправлять обратно на платежстраница)

Я добавляю хэш в URL, когда всплывающее окно открыто, но когда пользователь нажимает кнопку «Назад», Chrome игнорирует хэш и перенаправляет обратно на предыдущую страницу вместо простого удаления хэша (работает нормально в Firefox)

У меня есть рабочий пример здесь

a) открыть эту страницу в Chrome

b) подождать, пока хэш не изменится на '# c'

c) затем нажмите кнопку возврата браузера

ожидаемое поведение: он должен изменить хэш обратно на «#b», а затем вернуться на «#a», но он игнорирует все изменения хеша и перенаправляет обратно на новую вкладкустраница

Это код 

      window.location.hash = 'a';
      setTimeout(function() {
        writeLength();
        window.location.hash = 'b';
        setTimeout(function() {
          writeLength();
          window.location.hash = 'c';
          setTimeout(function() {
            writeLength();
          }, 1500);
        }, 1500);
      }, 1500);

как мне смоделировать правильное поведение (если есть способ)?

Я использую Chrome Версия 77.0.3865.90 (Официальная сборка) (64-разрядная версия) на Mac

Вот изображение в формате GIF

actual behavior GIF image

1 Ответ

1 голос
/ 27 сентября 2019

В этом браузере вам нужно явно установить хотя бы одно состояние в истории через История API (хотя, не знаю почему).

Пример должен работать даже в этом iframe. 

history.replaceState( {}, '' );

window.location.hash = 'a';
setTimeout(function() {
  console.log( location.hash );
  window.location.hash = 'b';
  setTimeout(function() {
    console.log( location.hash );
    window.location.hash = 'c';
    setTimeout(function() {
      console.log( location.hash );
      console.log( "You can now use your browser's back button" );
      onpopstate = e => console.log( location.hash );
    }, 150);
  }, 150);
}, 150);
...