javascript - 不活动后的 Javascript 重定向/注销（带有模式弹出窗口）

Question

以下 JS 不会自动重定向或注销，它只会在模态框上单击“确定”时重定向到 url。

           // reset main timer i,e idle time to 0 on mouse move, keypress or reload
    window.onload = reset_main_timer;
    document.onmousemove = reset_main_timer;
    document.onkeypress = reset_main_timer;
    document.onscroll = reset_main_timer;
    
    // create main_timer and sub_timer variable with 0 value, we will assign them setInterval object
    var main_timer = 0;
    var sub_timer = 0;

    // this will ensure that timer will start only when user is loged in
    var user_loged_in = $("#user_loged_in").val()

   // within dilog_set_interval function we have created object of setInterval and assigned it to main_timer.
   // within this we have again created an object of setInterval and assigned it to sub_timer. for the main_timer
   // value is set to 15000000 i,e 25 minute.note that if subtimer repeat itself after 5 minute we set user_activity
   // flag to inactive
    function dialog_set_interval(){
        main_timer = setInterval(function(){
            if(user_loged_in == "true"){
                $("#inactivity_warning").modal("show");
                sub_timer = setInterval(function(){
                    $("#user_activity").val("inactive")
                },3000);
            }
        },10000);
    }
   // maintimer is set to 0 by calling the clearInterval function. note that clearInterval function takes
   // setInterval object as argument, which it then set to 0
    function reset_main_timer(){
        clearInterval(main_timer);
        dialog_set_interval();
    }

    // logout user if user_activity flag set to inactive, when he click ok on popup. whenuser click O.K
    // on the warning the subtimer is reset to 0
    $(".inactivity_ok").click(function(){
        clearInterval(sub_timer);
        if($("#user_activity").val() == "inactive"){
            window.location = window.location // if your application not manage session expire 
                                              //automatically. clear cookies and session her
        }
    });

    <div id="inactivity_warning" class="modal hide fade" data-backdrop="static" style="top:30%">
  <div class="modal-header">
    <button type="button" class="close inactivity_ok" data-dismiss="modal" aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
    <div class="row-fluid">
      <div id="custom_alert_message" class="span12">
       You will be logged out in due to inactivity very shortly.
     </div>
   </div>
  <div class="modal-footer">
    <a href="javascript:void(0)" class="btn inactivity_ok" data-dismiss="modal" aria-hidden="true">O.K</a>
   </div>
  </div>
</div>
    
    
  <input id="user_activity" name="user_activity" type="hidden" value="active" />
<input id="user_loged_in" name="user_loged_in" type="hidden" value="true" />  

我希望模态显示为用户的警告消息..让他们知道他们将被注销...他们可以单击以留在页面上或忽略它，它将自动重定向到注销页面。

标签： javascripthtmljquery

Answer 1

编辑

现在除了 css 之外，你已经拥有了所有东西......不要开始按设计制作 webapp，没有人喜欢一个非常不工作的应用程序。

我使用了 jQuery，因为您似乎自己也在使用它。

userIsLogguedIn没有实现，因为我不知道您验证用户的方式。

logout也必须正确定义。

没有Ok keep me connected，因为每个鼠标事件都会设置当前活动并隐藏模式。

$( document ).ready( initApp);

function initApp(){
    console.debug('initApp');
    const activityModal = $('#modal');
    activityModal.hide();
    const activityMaxDelayWarning = 5 * 1000;
    const activityMaxDelay = 35 * 1000;
    const activityCheckInterval = 5 * 1000; 

    activityRegister();
    document.addEventListener('mousemove', activityRegister);
    setInterval( activityCheck, activityCheckInterval);

    function activityRegister() {
        popupHide();
        activityLast = Date.now();
        console.debug('Activity set to', activityLast);
    }

    function userIsLogguedIn() {
        //DO it
        return true;
    }
    function activityCheck() {
        const delay = Date.now() - activityLast;
        console.debug("Activity delay is", delay);

        if ( !userIsLogguedIn() ) {
            console.debug("     user is not logged in");
            return;
        }
        if ( delay > activityMaxDelay ) {
            console.debug("     will logout");
            logout();
        } else if ( delay > activityMaxDelayWarning ) {
            console.debug("     will show warning");
            popupShow();
        }
    }

    function popupShow(){
        activityModal.show();
    }

    function popupHide(){
        activityModal.hide();
    }

    function logout() {
        window.location.href='https://stackoverflow.com/questions/65007832/javascript-redirect-logout-after-inactivity-with-modal-popup/65008157';
    }
}

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="modal">
            <p>You will be logged out in due to inactivity very shortly.</p>
        </div>
        <div>After some time, a warning message will appears ahead</div>
    </body>
</html>