Javascript: изменить функцию кнопки браузера назад

Question

Есть ли способ сделать кнопку возврата пользователя в браузере, вызвать функцию javascript вместо возврата на страницу?

Answer 1

Вы не можете переопределить поведение, если пользователь переходит по ссылке на вашу страницу, щелкнув Назад, он снова его отключит.

Но вы можете сделать действия JavaScript на своей странице, добавить записи в историю, как если бы они были кликами на новые страницы, и контролировать, что происходит с «Назад» и «Вперед» в контексте этих кликов.

Существуют библиотеки JavaScript, которые могут помочь с этим, с Действительно простой историей , являющейся популярным примером.

Answer 2

да, вы можете. Используйте это js:

(function(window, location) {
    history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");
    history.pushState(null, document.title, location.pathname);

    window.addEventListener("popstate", function() {
      if(location.hash === "#!/stealingyourhistory") {
            history.replaceState(null, document.title, location.pathname);
            setTimeout(function(){
              location.replace("http://www.programadoresweb.net/");
            },0);
      }
    }, false);
}(window, location));

Это перенаправит вашу кнопку "Назад" на указанное вами место.

Answer 3

Я предполагаю, что вы хотите создать одностраничное приложение, которое не будет перезагружать веб-сайт во время навигации пользователя, и, следовательно, вы хотите отменить встроенную функциональность кнопки «Назад» и заменить ее своей. Это также может быть полезно в мобильных веб-приложениях, где использование кнопки «Назад» внутри приложений является обычным делом, например, для закрытия окна в приложении. Чтобы достичь этого без библиотеки , вам необходимо:

1-й. Во всем приложении изменяйте location.hash окна вместо location.href (это то, что теги будут делать по умолчанию). Например, ваши кнопки могут запускать при нажатии события, которые изменяют location.hash следующим образом:

button.addEventListener('click', function (event) {

    // Prevent default behavior on <a> tags
    event.preventDefault()

    // Update how the application looks like
    someFunction()

    // Update the page's address without causing a reload
    window.location.hash = '#page2'

})

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

2nd. Загрузите этот код, чтобы вы могли запускать функцию при каждом изменении истории страниц (как вперед, так и назад). Вместо переключателя, который я использовал в этом примере, вы можете использовать if и проверять другие состояния, даже состояния и переменные, не связанные с location.hash. Вы также можете полностью заменить любое условие и просто запускать функцию каждый раз, когда изменяется история.

window.onpopstate = function() {
    switch(location.hash) {
        case '#home':
            backFromHome()
            break
        case '#login':
            backFromLogin()
            break
        default:
            defaultBackAnimation()
    }
}

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

Answer 4

Я думаю, это поможет. Вы можете написать свой код для выполнения при нажатии кнопки возврата браузера внутри функции onpopstate . Это работает в HTML5.

 window.onpopstate = function() {
       alert("clicked back button");
    }; history.pushState({}, '');