简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

How to add popup after page reload using onclick javascript

  function sync_data() {
localStorage.setItem("syncDataClicked", true);
location.reload();
}

window.onload = function () {
    if (localStorage.getItem("syncDataClicked") === "true") {
        localStorage.removeItem("syncDataClicked");
        sync_data('show');
    }
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<input type="submit" name="submit3" onclick="sync_data()" value="Sync data">
</body>
</html>

Html: 
<input type="submit" name="submit3" onclick="sync_data()" value="Sync data">

JS:
function sync_data() {
    window.onload = function () {
    setTimeout(function () {
        sync_data('show');
    }, 5000);
    }
    }

This js is not working. After onclick and page reload, I need to add popup via function sync_data(). Is there any solution. I have updated using local storage but it shows popup message

P粉921130067P粉921130067380 days ago499

reply all(2)I'll reply

  • P粉517475670

    P粉5174756702023-09-10 00:59:58

    Your window.onload function is already inside the sync_data function. So window.onload won't be triggered because the page is already loaded when the button is clicked. So your window.onload function should be executed before sync_data function is executed. So in sync_data function you should include flag. Based on this flag, the window.onload function will be triggered. You can use localStorage to store flags. Here is my suggested code. I'm not sure if it works. I added the custom popup alert to the code. 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sync Data</title>
    <script>
        function sync_data() {           
            localStorage.setItem("syncDataClicked", true);           
            location.reload();
        }

        window.onload = function () {            
            if (localStorage.getItem("syncDataClicked") === "true") {               
                localStorage.removeItem("syncDataClicked");                
                showPopup();
            }
        };

        function showPopup() {           
            alert('Data synced!');
        }
    </script>
</head>
<body>
    <input type="submit" name="submit3" onclick="sync_data()" value="Sync data">
</body>
</html>

    reply
    0
  • P粉990568283

    P粉9905682832023-09-10 00:04:19

    You can use the following code: 

    function sync_data(string) {
  localStorage.setItem("syncDataClicked", string);
  location.reload();
}
try{
if (localStorage.getItem("syncDataClicked")){
  let popup = new Blob([localStorage.getItem("syncDataClicked")],{type: "text/html"});
  let link = document.createElement("a");
  let url = window.URL.createObjectURL(popup);
  link.href = url;
  link.target= "_blank";
  link.click();
  localStorage.removeItem("syncDataClicked");
}
}
catch (e) {console.log("It's the first time"); }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<input type="submit" name="submit3" onclick="sync_data('show')" value="Sync data">
</body>
</html>

    reply
    0
  • Cancelreply