Displaying timeout warning within jQuery

问题

I currently handle timing out from a PHP web application as such:

Each page currently has a timeout check in PHP, which checks the current time against the last page load by the user. If the difference between the two exceeds 15 minutes, the user's session is destroyed, a new session is created, the current page location is put onto the session and the user is redirected to the login page.
Each page head has a <meta> tag which refreshes the page after 15 minutes and 5 seconds (thus "calling" the timeout check)

I am now currently looking at adding greater control for a user, for example, if they happen to be working on a page for a long period of time, and am looking at allowing for a popup to appear roughly two minutes before a timeout. The popup would then have options to either continue the session (make an AJAX call to refresh the last-activity in the session) or to log out. If the popup is ignored (if the user is on a different page, for example), the user is logged out.

According to Using Javascript to override or disable meta refresh tag, I won't be able to reset the <meta> tag, which will likely mean that I'll have to remove the tag. PHP/Javascript Session Timeout with warning's sole answer suggests to use a JavaScript call redirect to the login page, however this can be circumvented by disabling JavaScript.

What I'm thinking about doing is surrounding the <meta> redirect tag with <noscript> (allowable since I'm using HTML5), so that even if the user doesn't use JavaScript, they will still be timed out. This will also remove the <meta> tag from triggering whether or not the user decides to continue their session.

Would this approach make sense? Am I missing something? Is there another approach that would make better sense?

My current code

<?php
require_once("include/session.php");
require_once("include/sessioncheck.php");
?>
<html>
    <head>
         <meta http-equiv="refresh" content="<?= TIMEOUT_MIN * 60 ?>" />
         <!-- additional tags -->
    </head>
    <body>
        <!-- content -->
    </body>
</html>

回答1:

What I ended up doing was leaving my sessioncheck.php code in and removing the <meta> tag. I then added the following before the closing body tag:

<div id="timeout-warning"></div>
<div id="timeout-warning-text">Your session is set to expire in less than one minute
    due to inactivity. Click <a href="javascript:void(0)" id="timeout-restart">
    here</a> to keep your session alive.</div>

<script type="text/javascript">
    var timeoutWarning;
    var timeout;
    $(document).ready(function() {
        $("#timeout-restart").click(function() {
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                document.location.reload(false);
            }, 1801000);
            timeoutWarning = setTimeout(function() {
                $("#timeout-warning").fadeTo(2000, 0.5);
                $("#timeout-warning-text").fadeIn(2000);
            }, 1740000);
            $("#timeout-warning").hide();
            $("#timeout-warning-text").hide();
            return false;
        });

        timeoutWarning = setTimeout(function() {
            $("#timeout-warning").fadeTo(2000, 0.5);
            $("#timeout-warning-text").fadeIn(2000);
            clearTimeout(softTimeout);
        }, 1740000);
        timeout = setTimeout(function() {
            document.location.reload(false);
        }, 1801000);
    });
    </script>

The 1740000 and 1801000 numbers are based from a PHP const, which happens to be based on a timeout of half an hour.

来源：https://stackoverflow.com/questions/15147118/displaying-timeout-warning-within-jquery

标签

php

jquery

ajax

session