En las aplicaciones reales, a menudo necesitamos implementar la necesidad de hacer clic en la retorno, la página, la página anterior y otros botones en las aplicaciones y navegadores móviles para cerrar la página, ajustar a la página especificada o realizar otras operaciones. Entonces, cómo monitorear los eventos al hacer clic en el botón de retorno de aplicaciones como WeChat, Alipay, Baidu Nuomi, Baidu Wallet, etc. o la página anterior o el botón de retroceso del navegador.
Creo que muchos amigos son como yo, que han buscado en Baidu y Sogou durante mucho tiempo, pero no han encontrado un método.
Aquí está cómo monitorear:
En primer lugar, necesitamos entender la historia del navegador.
Como saben, podemos usar el historial de ventanas JavaScript en la página y volver a la página anterior. Sin embargo, debido a las razones de seguridad, JavaScript no permite modificar el enlace de URL existente en la historia, pero puede usar el método PushState para agregar enlaces de URL al historial y proporcionar monitoreo de eventos de PopState para emitir la URL de la pila de historial. Desde que se proporciona el monitoreo del evento PopState, podemos monitorearlo.
Haga clic en el botón para escuchar el código de implementación para el botón de retorno, retorno y de página anterior:
Window.AdDeventListener ("PopState", function (e) {alert ("Escuché el evento de botón de retorno del navegador"); // Implemente su propia función de acuerdo con sus propias necesidades}, falso);Aunque escuchamos el evento posterior, la página aún volverá a la página anterior, por lo que debemos usar PushState para agregar una URL de esta página para representar esta página. Todos saben muy bien que es #
función pushHistory () {var state = {title: "title", url: "#"}; window.history.pushstate (estado, "título", "#"); }Al ingresar a esta página, presionamos una conexión local a este historial. Al hacer clic en las operaciones de regreso, retorno y página anterior, escuche e implementen sus propias operaciones en el código de escucha.
Aquí está el código completo:
$(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert("I heard the browser's return button event");//Implement your own functions according to your needs}, false); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#");El contenido anterior es solo el código central enumerado por el editor para todos. Puede agregar, modificar y eliminar el código de acuerdo con sus necesidades. Si encuentra alguna pregunta durante el proceso de referencia a este código, ¡déjame un mensaje y el editor responderá a todos a tiempo!