Question

我正在使用JSF 2.0，我要求当会话超时发生时，我想显示一个超时警告弹出窗口，如果我点击超时警告窗口中的确定按钮，则弹出窗口然后会话想要继续其他方面，它应该重定向到会话超时页面，你可以帮助我在这方面如何创建这种类型的要求。

谢谢，Mani

Answer 1

仅从理论上说：Primefaces组件库有一个组件p:idleMonitor，在一段时间后会出现一个弹出对话框：

<p:idleMonitor timeout="10000"   
            onidle="idleDialog.show()" onactive="idleDialog.hide()"/>

我从未在实践中使用它但当我注意到这个组件时，我认为这可以用作会话超时警告系统。也许您可以根据您的特殊功能要求进行调整。但请记住，此组件会计算客户端空闲时间而非服务器空闲时间。

Answer 2

我得到了解决方案在java脚本中，我将所有Jquery函数创建为public

 var defaults = {
        inactivity: 600000, //10 Minutes
        noconfirm: 300000, //5 minutes
        sessionAlive: 900000, //15 Minutes
        redirect_url: 'TimeOut.xhtml',
        click_reset: true,
        alive_url: '',
        logout_url: 'TimeOut.xhtml'
    }


var opts = $.extend(defaults);
var liveTimeout, confTimeout, sessionTimeout;

$(function(){
    start_liveTimeout = function() 
      {
        clearTimeout(liveTimeout);
        clearTimeout(confTimeout);
        liveTimeout = setTimeout(logout, opts.inactivity);

        if(opts.sessionAlive)
        {
          clearTimeout(sessionTimeout);
          sessionTimeout = setTimeout(keep_session, opts.sessionAlive);
        }
      };    
  });

$(function(){
    logout = function() {       
        confTimeout = setTimeout(redirect, opts.noconfirm);
        showAlert();        
      };    
  });

$(function(){
    redirect = function() {
        if(opts.logout_url)
        {
          $.get(opts.logout_url);
        }
        window.location.href = opts.redirect_url;
      };
  });

$(function(){
    stay_logged_in = function(el) {
        start_liveTimeout();
        if(opts.alive_url)
        {
          $.get(opts.alive_url);
        }
      };
  });

$(function(){
    keep_session = function() {
        $.get(opts.alive_url);
        clearTimeout(sessionTimeout);
        sessionTimeout = setTimeout(keep_session, opts.sessionAlive);
      } ;

  });

(function($){
    $.fn.idleTimeout = function(options) {

      return this.each(function() {
        obj = $(this);
        start_liveTimeout();
        if(opts.click_reset)
        {
          $(document).bind('click', start_liveTimeout);
        }
        if(opts.sessionAlive)
        {
          keep_session();
        }
      });

    };
})(jQuery);


$(document).ready(function(){
    $(document).idleTimeout();
    $("input[id$=btnOK]").click(function () {
        $.modal.close();
        stay_logged_in(); 
    });
});

function showAlert() {
    idleSessionAlert = $('#basic-modal-content').modal({
        opacity : 50,
        overlayCss: {backgroundColor:"#000"},
        escClose : false, 
        modal:true,     
        onOpen: function (dialog) {
            dialog.overlay.slideDown('slow', function () {
                dialog.data.hide();
                dialog.container.fadeIn('slow', function () {
                    dialog.data.fadeIn('slow');
                });
            });
        },
        onClose: function (dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.hide('slow', function () {
                    dialog.overlay.slideUp('slow', function () {
                        $.modal.close();
                    });
                });
            });
        }

    });
}

在Css

#basic-modal-content {
    display: none;
}
#simplemodal-container {
    display:none;
    height:300px; 
    width:530px; 
    color:#000000; 
    background-color:#ffffff;
    border:1px solid #ffffff;
    border-radius: 10px;
    padding:12px;
}
#simplemodal-container p {
    color:#000000; 
    display:block;
    font-size: 1em;
    font-style: verdana normal;
    padding: 10px 10px 5px 10px;
    margin: 0px;
    float: left;
    width: 510px;
}
.modalGroupHeader { 
    line-height: 1.25;
    font-style: arial normal;
    font-size: 1em;
    font-weight: bold;
    position: relative;
    display: block;
    color: #000000;
    padding-top: 0.615em;
    padding-bottom: 0.615em;
    padding-left: 10px;
    float: left;
}
.modalSectionHeader {
    line-height: 48px;
    font-style: arial normal;
    font-size: 1.308em;
    font-weight: normal;
    display: block;
    color: #007dba;
    float: left;
    width: 530px;
    padding-bottom: 10px;
}
.modalSectionHeader_left {
    height: 48px;
    width: 15px;
    background-image: url(../images/sectionHeader/sectionHeader_left.gif);
    float: left;
    position: relative;
}
.modalSectionHeader_right {
    right: 0;
    height: 48px;
    width: 15px;
    background-image: url(../images/sectionHeader/sectionHeader_right.gif);
    float: right;
    position: relative;
}
.modalSectionHeader_body {
    line-height: 48px;
    height: 48px;
    width: 500px;
    background-image: url(../images/sectionHeader/sectionHeader_tile.gif);
    background-repeat: repeat-x;
    float: left;
    position: relative;
}
.modalButtonPanel { 
    width: 530px;
    float: left;
    bottom: 10px;
    position:absolute;
}

在我的xhtml中，我在按钮中调用JSf ajax请求，因此它将扩展我的会话

 <div id="basic-modal-content">
                <p>Click OK to continue your session</p>
                    <h:commandButton id="btnOK" styleClass="btnOK">
                        <f:ajax event="click" listener="#{HandlerBean.extendSession()}" immediate="true" ></f:ajax>
                    </h:commandButton>
            </div>

Java Session超时弹出窗口

2 个答案: