Добровольный сценарий перенаправления кнопки «Назад»?
Я пытаюсь использовать функцию сценария перенаправления кнопки «Назад». У меня есть плагин, который воспроизводит фоновую (инициируемую пользователем) музыку на моем сайте. Пока пользователь нажимает кнопку «вперед», музыка непрерывно и почти непрерывно течет со страницы на страницу без перезапуска. Если пользователь нажимает кнопку «Назад» (или обновляет), музыка останавливается, и он должен вручную нажать кнопку воспроизведения, чтобы перезапустить поток. Автор говорит, что у них нет способа решить эту проблему. Я пока не сдаюсь.
Я думаю, почему бы не использовать JavaScript для записи URL-адреса предыдущей страницы браузера, затем захвата триггера кнопки «Назад» и отправки пользователя «вперед» на этот URL-адрес, таким образом сохраняя музыкальный поток нетронутым, соблюдая желание пользователя вернуться на страницу назад?
Концептуально, будучи супернубом в JavaScript, я собрал это вместе из разных источников здесь и codingbeautydev...
$(window).bind("onpopstate", function (e) {
const previousPage = document.getElementById("previous-page");
previousPage.textContent = document.referrer;
window.history.pushState({ page: 1 }, "", "");
window.onpopstate = function (event) {
if (event) {
window.location.href = previousPage;
}
};
});
Моей первой мыслью было то, что в моей работе наверняка есть какие-то синтаксические ошибки и, возможно, гораздо больше, что нужно изменить, но я надеюсь, что кто-то сможет легко подправить мой грубый набросок. Кроме того, помимо выполнения этой работы, я вижу пределы этого, позволяя только 1 страницу истории, и мне любопытно, есть ли способ вложить ее в стопку из нескольких страниц, которые можно было бы посетить в обратном порядке, все при движении «вперед». Сначала о главном, а потом о большем и лучшем.
Спасибо ребята! 😀 Отметка
Я просто хочу отправить кого-то (через location.href) на предыдущую страницу, на которой он был, когда нажимал кнопку «Назад». Я не хочу, чтобы кнопка «Назад» работала по умолчанию. Мне нужно, чтобы он фактически действовал как ссылка, движущаяся вперед, а не назад. то есть я нахожусь на www.site.com/paper, затем я нажимаю ссылку на странице на www.site.com/boxes, и это загружается. Затем я нажимаю кнопку «Назад», но вместо того, чтобы позволить обычной функции «Назад» работать, я хочу узнать, какой был URL-адрес предыдущей страницы (www.site.com/paper), и вместо этого использовать location.href для загрузки этой страницы. Надеюсь, это поможет! Спасибо!
Ваш комментарий более прямолинеен, чем сам вопрос. Вы должны следовать рекомендациям по вопросам StackOverflow, чтобы сформировать правильный вопрос. Я предлагаю вам обновить вопрос только до одного вопроса. Очистите текст, чтобы он не содержал никаких личных приветствий или юмора (спасибо, ребята, Марк. Я еще не сдаюсь, давайте начнем здесь и посмотрим, как пойдет... и т. д.). Измените заголовок на «Переопределить действие кнопки «Назад» в браузере по умолчанию» и спрашивайте только о конкретной проблеме. Хорошая работа по добавлению кода.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы не можете изменить поведение по умолчанию кнопки «Назад» или «Вперед» в браузере, если только ваше приложение не использует хэши URL-адресов для навигации, но, насколько я понимаю ваш вопрос, пользователь на самом деле переходит, скажем, от .com/paper к .com/boxes, а не от .com/paper#page1 к .com/paper#page2.
Один из возможных вариантов, который вы можете попробовать, — это использовать следующий (отсюда):
window.addEventListener('pageshow', function (event) {
if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') {
// User got here from using the Back or Forward button
}
});
Это сработает, когда пользователь попадет на страницу, на которой работает этот код, с помощью кнопки окна «назад» или «вперед», а также если пользователь перейдет от /boxes обратно к /paper.
Вы можете попытаться сохранить текущее состояние музыки, воспроизводимой в фоновом режиме (какая песня, метка времени, уровень звука и т. д.) в локальном хранилище (макс.) каждую секунду или около того, и получить сохраненные значения внутри функции выше, чтобы продолжить музыка, которую пользователь в последний раз слушал, когда покидал предыдущую страницу. Не самое элегантное решение, но все, о чем я сейчас думаю, может действительно сработать.
Редактировать:
Код, который вы запрашивали. Chrome и Safari будут блокировать/игнорировать его из-за манипуляций с историей, за исключением случаев, когда пользователь сначала взаимодействует со страницей. Это не то, как следует использовать history. Не используйте его в продакшене, а играйте с ним сколько хотите. Также вот простой пример того, как можно использовать историю.
window.history.pushState({}, '', window.location.pathname);
let previousPage = document.referrer;
window.addEventListener('popstate', (e) => {
window.location.assign(previousPage)
});
Я не уверен, что понимаю ваше предложение, но что касается музыки, мне ничего не нужно делать, чтобы увековечить воспроизведение, кроме как не перемещаться назад. При нажатии на любую ссылку на сайте непрерывно воспроизводится музыка в фоновом режиме. Есть ли способ на любой данной веб-странице вызвать URL-адрес страницы, с которой пришел пользователь? т. е. lastPage = theURL.iwasat.wheniclicked.thelink.togethere Если это так, я вижу, как люди перенаправляют пользователей, когда они нажимают кнопку «Назад», на любой сайт, который им нужен. Я просто хочу, чтобы они нажали кнопку «Назад» и были переадресованы на последнюю страницу. 😀
То, что вы хотите, будет 1) работать только в SPA и 2) вызывать цикл между текущей страницей и первой страницей в стеке истории. Это манипуляция историей, и как в Chrome, так и в Safari есть защита именно для этого, чтобы пользователи не попали в ловушку. Так что это не сработает. Тем не менее, Firefox каким-то образом позволяет это. Я добавил в свой ответ некоторый код, который делает то, что вы хотите, однако он работает только в Firefox (например, в Chrome вам нужно сначала взаимодействовать со страницей, чтобы popstate сработал).
Хорошо, я понял. Я ценю, что вы добавили это. Это все еще полезно для меня, чтобы понять и практиковать. Я вижу, что вы говорите с петлей. Я сам был обеспокоен этим, и я думал, что следующим шагом будет реализация способа построения стека из первой целевой страницы и управления им вручную, чтобы пользователь мог перемещаться назад, если не полностью, то, возможно, 5 или 10 страниц, чтобы сделать его практичным. В конце концов, я всегда хочу сделать пользователя счастливым. На данном этапе кажется, что компромисс не совсем точный ответ на лучший способ обработки музыки.
Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно точно сказать, о чем вы спрашиваете.