在后台加载图像并测试onerror事件

时间:2013-06-26 14:32:16

标签: javascript image onerror

我有一个asp.net webapp,需要用户身份验证,并且身份验证在60分钟内设置为超时。 webapp中的一个页面是一个谷歌地图页面,它加载了一个kml,其中包含指向安全站点上信息的链接。我正在尝试解决可能让其会话过期并返回仍在Google地图页面上的浏览器的移动用户问题,虽然地图仍然有效,但所有指向安全网站上信息的链接都会导致重定向到login.aspx。我一直试图实现的解决方案是在设置的时间间隔内在后台加载一个非常小的图像文件,并在发生错误事件时执行重定向。我的测试代码如下:

<script type="text/javascript">
    var interval;
    interval = setInterval('chkAuth()', 10000);

    function chkAuth() {
        var testImg = new Image();
        testImg.onerror = function () {
            alert("Your session has expired!");
        }
        testImg.onload = function () {
            alert("Your session has extended!");
        }
        testImg.src = "image url"
    }
</script>

当我测试代码时,即使我的会话已过期,我也会收到onload事件,我可以通过尝试在另一个窗口中加载图像来验证,这会导致重定向到login.aspx。我已经尝试通过将不正确的url作为图像源来测试onerror事件,并且在这种情况下它会触发。我的想法是,这个解决方案至少在浏览器处于活动状态时也会扩展我的asp.net会话。

为什么当图片网址导致重定向到login.aspx时,我没有收到onerror事件?

1 个答案:

答案 0 :(得分:0)

解决这个问题:

function chkAuth() {
        var date = new Date();
        var currentTime = date.getTime();
        var imgURL = 'small.png' + '?time=' + currentTime;
        var testImg = new Image();
        testImg.onerror = function () {
            alert("Your session has expired!");
            location.reload();
        }
        testImg.onload = function () {
            alert("Your session has extended!");
        }
        testImg.src = imgURL;
    }

问题是图像对象存储在浏览器缓存中。通过将当前时间添加到URL字符串,我强制浏览器重新加载图像。我没有想到图像会被缓存,因为我只是在背景中加载图像对象而不将其绑定到文档。