JSFiddle - React, Tailwind, and code Playground

by junhui

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
</head>
<body>
    <p>This demo has 3 events attached:</p>
    <ul>
        <li>beforeunload</li>
        <li>unload</li>
        <li>pagehide</li>
    </ul>
    <p>One of these events should be triggred when you refresh the page on safari iOS</p>
</body>
</html>

JavaScript

window.addEventListener('pagehide', function() {
        // window.open("https://www.google.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
        var myWindow = window.open("", "");
        myWindow.document.body.innerHTML = "pagehide";
    });
    window.addEventListener('unload', function() {
        // window.open("https://www.google.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
        var myWindow = window.open("", "");
        myWindow.document.body.innerHTML = "unload";
    });
    window.addEventListener('beforeunload', function() {
        // window.open("https://www.google.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
        var myWindow = window.open("", "");
        myWindow.document.body.innerHTML = "beforeunload";
    });