javascript - jQuery 脚本问题，为用户提供一个带有两个 PB 的弹出对话框。一个用于继续 session ，另一个用于结束 session

Question

我有一个网络应用程序，我正在尝试实现 session 超时代码。我得到了一个 .js 文件，用户可以选择“继续当前 session ”或“结束 session ”PB

但是，如果用户单击“继续当前 session ”PB， session 仍然超时。

请告诉我这个脚本有什么问题:这是代码

超时-dialog.js:

String.prototype.format = function() {
  var s = this,
      i = arguments.length;

  while (i--) {
    s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
  }
  return s;
};

!function($) {
  $.timeoutDialog = function(options) {

    var settings = {
      timeout: 1200,
      countdown: 60,
      title: 'Employee TimeOut Session',
      message: 'Your session will expire in {0} seconds.',
      question: 'press OK to remain logged in.',
      keep_alive_button_text: 'Yes, Keep me signed in',
      sign_out_button_text: 'No, Sign me out',
      keep_alive_url: '/keep-alive',
      logout_url: null,
      logout_redirect_url: '/',
      restart_on_yes: true,
      dialog_width: 350
    }

    $.extend(settings, options);

    var TimeoutDialog = {
      init: function () {
        this.setupDialogTimer();
      },

      setupDialogTimer: function() {
        var self = this;
        window.setTimeout(function() {
           self.setupDialog();
        }, (settings.timeout - settings.countdown) * 1000);
      },

      setupDialog: function() {
        var self = this;
        self.destroyDialog();

        $('<div id="timeout-dialog">' +
            '<p id="timeout-message">' + settings.message.format('<span id="timeout-countdown">' + settings.countdown + '</span>') + '</p>' +
            '<p id="timeout-question">' + settings.question + '</p>' +
          '</div>')
        .appendTo('body')
        .dialog({
          modal: true,
          width: settings.dialog_width,
          minHeight: 'auto',
          zIndex: 10000,
          closeOnEscape: false,
          draggable: false,
          resizable: false,
          dialogClass: 'timeout-dialog',
          title: settings.title,
          buttons : {
            'keep-alive-button' : {
              text: settings.keep_alive_button_text,
              id: "timeout-keep-signin-btn",
              click: function() {
                self.keepAlive();
              }
            },
            'sign-out-button' : {
              text: settings.sign_out_button_text,
              id: "timeout-sign-out-button",
              click: function() {
                self.signOut(true);
              }
            }
          }
        });

       self.startCountdown();
      },

      destroyDialog: function() {
        if ($("#timeout-dialog").length) {
          $(this).dialog("close");
          $('#timeout-dialog').remove();
        }
      },

      startCountdown: function() {
        var self = this,
            counter = settings.countdown;

        this.countdown = window.setInterval(function() {
          counter -= 1;
          $("#timeout-countdown").html(counter);

          if (counter <= 0) {
            //window.clearInterval(self.countdown);
            self.signOut(false);
          }

        }, 1000);
      },

      keepAlive: function() {
        var self = this;
        this.destroyDialog();
        //window.clearInterval(this.countdown);
        $.get(settings.keep_alive_url, function(data) {
          if (data == "OK") {
            if (settings.restart_on_yes) {
              self.setupDialogTimer();
            }
          }
          else {
            self.signOut(false);
          }
        });
      },

      signOut: function(is_forced) {
        var self = this;
        this.destroyDialog();

        if (settings.logout_url != null) {
            $.post(settings.logout_url, function(data){
                self.redirectLogout(is_forced);
            });
        }
        else {
            self.redirectLogout(is_forced);
        }
      },

      redirectLogout: function(is_forced){
        var target = settings.logout_redirect_url + '?next=' + encodeURIComponent(window.location.pathname + window.location.search);
        if (!is_forced)
          target += '&timeout=t';
        window.location = target;
      }
    };

    TimeoutDialog.init();
  };
}(window.jQuery);




.aspx code:

These are my reference in
<head>

          <script src="Comm/jquery.min.js" type="text/javascript"></script>
         <script src="Comm/jquery-ui.min.js" type="text/javascript"></script>
         <script src="Comm/timeout-dialog.js" type="text/javascript"></script>
         <link rel="stylesheet" href="css/timeout-dialog.css" type="text/css" media="screen, projection" />

</head>


In the<body> section

<body>

       <script type="text/javascript">
             var timeLeft = <%= Session.Timeout * 60 %>;
                $(document).ready(function () {
                    $.timeoutDialog({ timeout: timeLeft, countdown: 10, logout_redirect_url: '../sessionLogout.htm', restart_on_yes: false });
                });
     </script>

....
....
</body>

Answer 1

确保您的保持事件 URL 返回“OK”，因为它是代码正在寻找的内容。

$.get(settings.keep_alive_url, function(data) {
      if (data == "OK") {
        if (settings.restart_on_yes) {
          self.setupDialogTimer();
        }
      }
      else {
        self.signOut(false);
      }