У меня есть простое веб-приложение, состоящее из 3 простых страниц.
- а.html
- б.html
- c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="b.html">b.html</a>
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="a.html">a.html</a>
<br />
<a href="c.html">c.html</a>
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="b.html">b.html</a>
</body>
</html>
Как видно из приведенного выше кода, a.html
имеет ссылку на b.html
, b.html
имеет ссылку на a.html
и c.html
и, наконец, c.html
имеет ссылку на b.html
.
Все страницы будут размещены на одном домене, и мне нужна очень простая вещь. Все, что я хочу, это выполнять обратный вызов всякий раз, когда нажимается кнопка браузера назад/вперед (в частности, перед переходом на новую страницу), и в обратном вызове мне нужна страница, на которую мы будем переходить. И я не хочу обновлять историю браузера, достигая вышеуказанного (я не хочу испортить работу пользователя, обновление истории браузера приведет к неожиданной навигации для пользователя)
Решения, которые я пробовал:
performance.navigation.type
Можно использовать performance.navigation.type == 2, но он не различает кнопки "назад" и "вперед". Так что толку от меня мало. Есть ли способ различить здесь нажатия кнопок "назад" и "вперед"?- Я не хочу искажать
this.window.history
, чтобы получить обратный вызов наonpopstate
(см. это). Искажение истории Windows означает разрушение пользовательского опыта. Можно ли это сделать, не искажая историю Windows? - Я знаю, что с помощью объекта
window.history
я не могу найти URL-адрес, на который будет переходить кнопка «вперед/назад». (Это из-за безопасности). Но при условии, что все мои страницы находятся в одном домене, могу ли я каким-то образом получить URL-адрес, на который меня приведет кнопка «вперед/назад». Больше всего меня беспокоитb.html
. Пока я нахожусь наb.html
, кнопка «вперед/назад» может привести меня кa.html
илиc.html
, как мне обнаружить это до того, как произойдет фактическая навигация, чтобы я мог получить обратный вызов в этот момент и выполнить его. - Я попытался использовать JQuery-Mobile, но застрял и разместил его как отдельный вопрос а>. Хотя я не уверен, как JQuery Mobile достигает этого и искажает ли это историю браузера.
- Я пытался использовать React-маршрутизаторы, но они больше подходят для одностраничного приложения, и поэтому тоже не очень помогают. Можно ли это сделать с помощью каких-либо реагирующих концепций?
I want to execute a callback whenever browser's back/forward button is pressed
Все, что вы можете сделать, это запустить код вbeforeunload
, но нет способа узнать, что вызвало срабатывание этого события; пользователь мог ввести новый веб-адрес или закрыть браузер. Если есть конкретная причина, по которой вы хотите знать, была ли нажата кнопка «вперед/назад», вам потребуется перепроектировать страницу, чтобы обойти это ограничение. - person Rory McCrossan   schedule 06.08.2019beforeunload
, но, как вы уже сказали, оно мне не очень полезно. Не могли бы вы объяснить, что вы подразумеваете под реинжинирингом страницы, чтобы обойти это ограничение? - person Lavish Kothari   schedule 06.08.2019