Web Front-end
H5 Tutorial
Many people don't know the event methods for monitoring the return, back, and previous page buttons of mobile apps and browsers such as WeChat and Alipay.
Many people don't know the event methods for monitoring the return, back, and previous page buttons of mobile apps and browsers such as WeChat and Alipay.
In actual applications, we often need to click the return, back, previous page and other buttons in mobile apps and browsers to close the page, adjust to the specified page or perform some other operations
Requirement, how to monitor the event in the code when the return button of WeChat, Alipay, Baidu Nuomi, Baidu Wallet and other apps or the previous page or back button of the browser is clicked.
I believe that many friends, like me, have searched in Baidu and Sogou for a long time without finding the method. Let me tell you how to monitor:
First of all, we need to understand the history of the browser. As we all know, we can use JavaScript window history on the page to go back to the previous page. However, due to security reasons, JavaScript is not allowed to modify the existing url links in
history, but you can use the pushState method to add url links to the history. , and provide popstate event monitoring to pop up the URL from the history stack. Since popstate event
monitoring is provided, we can monitor it.
Return, back, previous page button click monitoring implementation code:
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);Although we monitor the back event, the page will still return to the previous page, so we need to use pushState to add this The url of the page represents this page. Everyone knows very well that it is
#function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}. When entering the page, we will push a local connection to the history. When you click on the return, backward and previous page operations, you will monitor and implement your own operations in the monitoring code.
The following is the complete code:
$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
});Note: Some codes can be found online!
Collection of follow-up questions:
1. The popstate event is triggered when entering the page in WeChat.
Solution: Define boolean variable bool=false. After the page is loaded, use the setTimeout method to set a timeout of 1.5s, and set bool=true in the timeout execution method.
Add bool judgment in popstate monitoring. When bool=true, execute the content. The specific code is as follows:
$(function(){
pushHistory();
var bool=false;
setTimeout(function(){
bool=true;
},1500);
window.addEventListener("popstate", function(e) {
if(bool)
{
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}
pushHistory();
}, false);
});The above is the content of the event methods for monitoring the return, back, and previous page buttons of mobile apps such as WeChat and Alipay and browsers that many people do not know. Please pay attention to more related content. PHP Chinese website (www.php.cn)!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Alipay PHP SDK transfer error: How to solve the problem of 'Cannot declare class SignData'?
Apr 01, 2025 am 07:21 AM
Alipay PHP...
How to solve the problem of 'Undefined array key 'sign'' error when calling Alipay EasySDK using PHP?
Mar 31, 2025 pm 11:51 PM
Problem Description When calling Alipay EasySDK using PHP, after filling in the parameters according to the official code, an error message was reported during operation: "Undefined...
The difference between H5 and mini-programs and APPs
Apr 06, 2025 am 10:42 AM
H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.
What is the difference between H5 page production and WeChat applets
Apr 05, 2025 pm 11:51 PM
H5 is more flexible and customizable, but requires skilled technology; mini programs are quick to get started and easy to maintain, but are limited by the WeChat framework.
What should I do if the company's security software conflicts with applications? How to troubleshoot HUES security software causes common software to fail to open?
Apr 01, 2025 pm 10:48 PM
Compatibility issues and troubleshooting methods for company security software and application. Many companies will install security software in order to ensure intranet security. However, security software sometimes...
How to solve the problem of JS resource caching in enterprise WeChat?
Apr 04, 2025 pm 05:06 PM
Discussion on the JS resource caching issue of Enterprise WeChat. When upgrading project functions, some users often encounter situations where they fail to successfully upgrade, especially in the enterprise...
How to choose H5 and applets
Apr 06, 2025 am 10:51 AM
The choice of H5 and applet depends on the requirements. For applications with cross-platform, rapid development and high scalability, choose H5; for applications with native experience, rich functions and platform dependencies, choose applets.
What are the different ways of promoting H5 and mini programs?
Apr 06, 2025 am 11:03 AM
There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.
