Home Web Front-end HTML Tutorial Clicking the browser's back button will refresh the history page. Solution to this problem

Clicking the browser's back button will refresh the history page. Solution to this problem

Nov 27, 2017 am 11:24 AM
firefox webkit Browser

First of all, we know how this problem occurs. If we have the following page list information page, click to enter the details page, modify the data on the details page and return it through history, and then return to the list information page, because the list information is a history return Yes, the original data before modification is still displayed by default, and the modified data needs to be refreshed. So, is there any way for us to refresh the data in the previous history page by clicking the return button on the mobile phone?

onpageshow event and onload event. The onpageshow event is similar to the onload event. The onload event is triggered when the page is loaded for the first time. The onpageshow event is triggered every time the page is loaded. That is, the onload event is not triggered when the page is read from the browser cache.

To see whether the page was loaded directly from the server or read from the cache, you can use the persisted attribute of the PageTransitionEvent object to determine. If the page reads this attribute from the browser's cache, it returns true, otherwise it returns false

Solution

By onload method

The code is as follows:

Write a hidden input in the page

<input type="hidden" id="refreshed" value="no">
Copy after login

js operation is as follows

    onload=function(){
        var refreshedId=document.getElementById("refreshed");
        if(refreshedId.value=="no"){
            refreshedId.value="yes";
           } else{
             refreshedId.value="no";
             location.reload();
         }
    }
Copy after login

Through onpageshow method

This method is no problem on the computer, but it does not return in Apple Safari To execute the onload event, use the following method:

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};
Copy after login

Through actual operation, we found that event.persisted always returns false on the computer, but there is no problem on the mobile phone safari.

Comprehensive solution

Therefore, you can write the code as follows:

  if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload() 
            }
        };
    }else{
        onload=function(){
            var refreshedId=document.getElementById("refreshed");
            if(refreshedId.value=="no"){
                refreshedId.value="yes";
               } else{
                 refreshedId.value="no";
                 location.reload();
             }
        }
    }
Copy after login

Through the above code, I found that when the page is opened for the first time in Safari, sometimes a splash screen will appear. Effect.

Add the following code:

$(window).bind("unload", function() { });
Copy after login

The splash screen effect will no longer appear.

Prevent caching through iframe

Add the following code to the page

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>
Copy after login

This method needs to be verified.

By TimestampForced refresh method

The following code is for the safari return button problem in iPad

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0
function showLoadingBox(text) {
    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
    showLoadingBoxCount = 0
    showLoadingBoxLoadedTimestamp = new Date().getTime();
    //Here load the spinner
}
function showLoadingBoxIpadRelaod()
{
    //计算时间超过500毫秒
    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;
    showLoadingBoxCount = showLoadingBoxCount + 1;
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if(diffTime > showLoadingBoxCount && isiPad){
        location.reload();
    }
}
Copy after login

I believe you have mastered it after reading these cases Method, for more exciting information, please pay attention to other related articles on the php Chinese website!


Related reading:

How to convert CSS encoding

css3 click to display ripple effects

How to use canvas to create the effect of particle fountain animation

The above is the detailed content of Clicking the browser's back button will refresh the history page. Solution to this problem. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Coinbase Exchange Login Port 2025 Coinbase Exchange Login Port 2025 Mar 21, 2025 pm 05:51 PM

Coinbase Security Login Guide: How to Avoid Phishing Sites and Scams? Phishing and scams are becoming increasingly rampant, and it is crucial to securely access the Coinbase official login portal. This article provides practical guides to help users securely find and use the latest official login portal of Coinbase to protect the security of digital assets. We will cover how to identify phishing sites, and how to log in securely through official websites, mobile apps or trusted third-party platforms, and provide suggestions for enhancing account security, such as using a strong password and enabling two-factor verification. To avoid asset losses due to incorrect login, be sure to read this article carefully!

The latest registration portal for Ouyi official website The latest registration portal for Ouyi official website Mar 21, 2025 pm 05:54 PM

As the world's leading digital asset trading platform, Ouyi OKX attracts many investors with its rich trading products, strong security guarantees and convenient user experience. However, the risks of network security are becoming increasingly severe, and how to safely register the official Ouyi OKX account is crucial. This article will provide the latest registration portal for Ouyi OKX official website, and explain in detail the steps and precautions for safe registration, including how to identify the official website, set a strong password, enable two-factor verification, etc., to help you start your digital asset investment journey safely and conveniently. Please note that there are risks in digital asset investment, please make cautious decisions.

Ouyi Exchange app domestic download tutorial Ouyi Exchange app domestic download tutorial Mar 21, 2025 pm 05:42 PM

This article provides a detailed guide to safe download of Ouyi OKX App in China. Due to restrictions on domestic app stores, users are advised to download the App through the official website of Ouyi OKX, or use the QR code provided by the official website to scan and download. During the download process, be sure to verify the official website address, check the application permissions, perform a security scan after installation, and enable two-factor verification. During use, please abide by local laws and regulations, use a safe network environment, protect account security, be vigilant against fraud, and invest rationally. This article is for reference only and does not constitute investment advice. Digital asset transactions are at your own risk.

Ouyi Exchange web version registration portal Ouyi registration portal Ouyi Exchange web version registration portal Ouyi registration portal Mar 20, 2025 pm 05:48 PM

This article details how to register an account on the official website of Ouyi OKX Exchange and start cryptocurrency trading. As the world's leading cryptocurrency exchange, Ouyi provides a wide range of trading varieties, multiple trading methods and strong security guarantees, and supports convenient withdrawal of a variety of fiat and cryptocurrencies. The article covers the search methods for Ouyi official website registration entrance, detailed registration steps (including email/mobile registration, information filling, verification code verification, etc.), as well as precautions after registration (KYC certification, security settings, etc.), and answers common questions to help novice users quickly and safely complete Ouyi account registration and start a cryptocurrency investment journey.

Binance Exchange app domestic download tutorial Binance Exchange app domestic download tutorial Mar 21, 2025 pm 05:45 PM

This article provides a safe and reliable Binance Exchange App download guide to help users solve the problem of downloading Binance App in the country. Due to restrictions on domestic application stores, the article recommends priority to downloading APK installation packages from Binance official website, and introduces three methods: official website download, third-party application store download, and friends sharing. At the same time, it emphasizes security precautions during the download process, such as verifying the official website address, checking application permissions, scanning with security software, etc. In addition, the article also reminds users to understand local laws and regulations, pay attention to network security, protect personal information, beware of fraud, rational investment, and secure transactions. At the end of the article, the article once again emphasized that downloading and using Binance App must comply with local laws and regulations, and at your own risk, and does not constitute any investment advice.

Log in to the latest official website of BitMEX exchange Log in to the latest official website of BitMEX exchange Mar 21, 2025 pm 06:06 PM

This article provides safe and reliable guides to help users access the latest official website of BitMEX exchange and improve transaction security. Due to regulatory and cybersecurity threats, it is crucial to identify the official BitMEX website and avoid phishing websites stealing account information and funds. The article introduces the search for official website portals through trusted cryptocurrency platforms, official social media, news media, and subscribes to official emails. It emphasizes the importance of checking domain names, using HTTPS connections, checking security certificates, and enabling two-factor verification and changing passwords regularly. Remember, cryptocurrency trading is high risk, please invest with caution.

Detailed explanation of the issuance price and issuance time of LOOM coins Detailed explanation of the issuance price and issuance time of LOOM coins Mar 20, 2025 pm 06:21 PM

LOOM Coin, a once-highly-known blockchain game and social application development platform token, its ICO was held on April 25, 2018, with an issue price of approximately US$0.076 per coin. This article will conduct in-depth discussion on the issuance time, price and important precautions of LOOM coins, including market volatility risks and project development prospects. Investors should be cautious and do not follow the trend blindly. It is recommended to refer to the official website of Loom Network, blockchain browser and cryptocurrency information platform to obtain the latest information and conduct sufficient risk assessment. The information in this article is for reference only and does not constitute investment advice. Learn about LOOM coins, start here!

Coinbase Exchange web version login portal Coinbase Exchange web version login portal Mar 21, 2025 pm 05:48 PM

The Coinbase exchange web version is popular for its convenience, but secure access is crucial. This article aims to guide users to log in to the official Coinbase web version safely and avoid phishing websites and hackers. We will explain in detail how to verify the official portal through search engines, trusted third-party platforms and official social media, and emphasize security measures such as checking the address bar security lock, enabling two-factor verification, avoiding public Wi-Fi, changing passwords regularly, and being alert to phishing emails to ensure the security of your digital assets. Correct access to the official Coinbase website is the first step to protecting your digital currency. This article will help you start your digital currency trading journey safely.

See all articles