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

【问题标题】：Loading image in the background and testing for onerror event在后台加载图像并测试 onerror 事件
【发布时间】：2013-06-26 14:32:15
【问题描述】：

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

<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 会话。

为什么当图像 url 导致重定向到 login.aspx 时我没有收到 onerror 事件？

【问题讨论】：

标签： javascript image onerror

【解决方案1】：

这样解决了：

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 字符串中，我强制浏览器重新加载图像。我没有想到图像会被缓存，因为我只是在后台加载图像对象而不将其绑定到文档。

【讨论】：