Question

我正在开发一个Web应用程序，在多个案例中我需要多个弹出窗口/警告消息。这三个场景我需要警告消息或弹出窗口。

当用户导航到应用程序内的其他选项卡时，应显示弹出窗口

当用户关闭标签页或浏览器窗口时，应显示弹出窗口

当用户导航到浏览器中的某个其他选项卡或用户最小化浏览器时，将在第n分钟显示警告消息，用户将自动进入应用程序选项卡，并弹出确认会话超时< / LI>

我使用以下代码来完成所有这些

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="idle_timer.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>



<script language="JavaScript">
$.noConflict();
$(".header v, .drop v").click(function(){
       window.onbeforeunload = null;
       return confirm("Are you sure you want to leave this page?");
});

</script>

<script language="javascript" type="text/javascript">          
$.noConflict();
$(window).on('mouseover', (function () {
           window.onbeforeunload = null;
       }));
       $(window).on('mouseout', (function () {
           window.onbeforeunload = ConfirmLeave;
       }));
       function ConfirmLeave() {
           return "";
       }
       var prevKey="";
       $(document).keydown(function (e) {       
                     if(window.onbeforeunload != null)
                           {
           if (e.key=="F5") {
               window.onbeforeunload = ConfirmLeave;
           }
           else if (e.key.toUpperCase() == "W" &amp; prevKey == "CONTROL") {
              if(y!=1)
               window.onbeforeunload = ConfirmLeave;   
           }
           else if (e.key.toUpperCase() == "R" &amp; prevKey == "CONTROL") {
               window.onbeforeunload = ConfirmLeave;
           }
           else if (e.key.toUpperCase() == "F4" &amp; (prevKey == "ALT" || prevKey == "CONTROL")) {
               window.onbeforeunload = ConfirmLeave;
           }
           prevKey = e.key.toUpperCase();
                           }
       });</script>

<script>
$.noConflict();
var IDLE_TIMEOUT = 10; //seconds
var _localStorageKey = 'global_countdown_last_reset_timestamp';
var _idleSecondsTimer = null;
var _lastResetTimeStamp = (new Date()).getTime();
var _localStorage = null;
var url      = window.location.href;
AttachEvent(document, 'click', ResetTime);
AttachEvent(document, 'mousemove', ResetTime);
AttachEvent(document, 'keypress', ResetTime);
AttachEvent(window, 'load', ResetTime);

try {
    _localStorage = window.localStorage;
}
catch (ex) {
}

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function GetLastResetTimeStamp() {
    var lastResetTimeStamp = 0;
    if (_localStorage) {
        lastResetTimeStamp = parseInt(_localStorage[_localStorageKey], 10);
        if (isNaN(lastResetTimeStamp) || lastResetTimeStamp &lt; 0)
            lastResetTimeStamp = (new Date()).getTime();
    } else {
        lastResetTimeStamp = _lastResetTimeStamp;
    }

    return lastResetTimeStamp;
}

function SetLastResetTimeStamp(timeStamp) {
    if (_localStorage) {
        _localStorage[_localStorageKey] = timeStamp;
    } else {
        _lastResetTimeStamp = timeStamp;
    }
}

function ResetTime() {
    SetLastResetTimeStamp((new Date()).getTime());
}

function AttachEvent(element, eventName, eventHandler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, eventHandler, false);
        return true;
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, eventHandler);
        return true;
    } else {
        //nothing to do, browser too old or non standard anyway
        return false;
    }
}

function WriteProgress(msg) {
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
         oPanel.innerHTML = msg;
    else if (console)
        console.log(msg);
}

function CheckIdleTime() {
    var currentTimeStamp = (new Date()).getTime();
    var lastResetTimeStamp = GetLastResetTimeStamp();
    var secondsDiff = Math.floor((currentTimeStamp - lastResetTimeStamp) / 1000);
    if (secondsDiff &lt; 1) {
        ResetTime();
        secondsDiff = 0;
    }
    WriteProgress((IDLE_TIMEOUT - secondsDiff) + "");
    if (secondsDiff &gt; IDLE_TIMEOUT-6) {
//             window.clearInterval(_idleSecondsTimer);
        var r=alert("Your session expires in 5 minutes \nPlease click \'OK\' to extend your session");

        if (r==true)
              {document.location.href = window.location.href;}

        ResetTime();
        //document.location.href = "logout.html";
    }
}
</script>

所有这些pop = ups工作正常，但问题是我在同一页面上使用datepicker.js，如果我使用这些脚本，我无法使用datepicker或datewidget。早些时候，datepicker表现得非常完美。我不知道这些脚本导致问题的原因。我可以使用任何其他脚本或任何其他可以正常使用这些脚本的日期选择器吗？

Answer 1

我可以看到你没有包含一个jquery ui库，而是另一个版本的jquery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>

我想你需要在自定义代码之前添加这个库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>

<script src="idle_timer.js" type="text/javascript"></script>

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="idle_timer.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

你可以尝试替换上面的代码，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="idle_timer.js" type="text/javascript"></script>

多个jquery或javascripts和datepicker无法正常工作

2 个答案: