2

我们有一个网页，通常通过单击 F5 或 Ctrl-R 重新加载，只是为了查看是否有新数据到达。

此页面中的所有图像都有一个永久缓存标头，因此浏览器永远不应重新加载。

但是当用户按下 F5 时，大多数浏览器都会检查每个缓存条目，并带有一个请求和一个 if-modfied-since 标头。我们的 HTML 页面无论如何都不会被缓存，但是图像应该被缓存很长时间，并且不需要询问图像是否被修改。这是一个无用的请求，我们想摆脱它。

我们的页面上有一个重新加载图标，但用户仍然会使用键盘重新加载（我也愿意）。

所以我尝试触发 F5 和 Ctrl-R 键并像这样手动重新加载（顺便说一句，我们使用的是 jquery）：

<img src="someimg.png" />
<a id="reload" href="mypage.html">Reload</a>    
<script type="text/javascript">
function loading() {
    window.location.href = $('#reload').attr("href"); 
    return false;
}

function isF5(e) {
    return e.which == 116;
}
function isCtrlR(e) {
    return e.ctrlKey &amp;&amp; e.which == 82;
}

function triggerReloadKeys(e) {
    if (isF5(e) || isCtrlR(e)) {
        $('#reload').click();
    }
}
$(document).bind("keydown", triggerReloadKeys);
$('#reload').click(loading);

someimg.png 总是带有一个持久的缓存指令。

我的第一个答案是告诉我不要接管用户浏览器，如果他愿意，让他刷新。你是对的，但我们在高峰时间的速度高达 5000 页/秒。甚至更多的图像，因为每个人都在重新加载页面。我们只是想减少请求的数量，不管它们有多快。（而且我知道我无法触发菜单栏中的浏览器刷新按钮，但我现在不关心它）。

我们非常成功地减少了应用程序中的请求数量，因为我们没有任何重新加载按钮或 F5，但每个人都被迫使用我们自己的 HTML 重新加载链接。

可以像这样一起禁用 F5 键：

function triggerReloadKeys(e) {
    if (isF5(e) || isCtrlR(e)) {
        return false;
    }
}

我不知道是否有可能在仍然使用缓存的同时触发 F5 并强制重新加载并模仿单击页面上另一个链接的行为。

有任何想法吗？

4

3 回答 3

5

我想你还没有得到你的答案。

这是我在我的网站上使用的：

var ctrlDown = false;
var ctrlKey = 17, f5Key = 116, rKey = 82;

$(document).keydown(function( e ) {
    if( e.keyCode == f5Key )
    {
        //F5 pressed. Copy your code here or try
        //window.location   = window.location;
        //It will avoid if-modified-since requests.
        e.preventDefault( );
    }

    if( e.keyCode == ctrlKey )
        ctrlDown = true;
    if( ctrlDown && ( e.keyCode == rKey ) )
    {
        //Ctrl + R pressed. Do whatever you want
        //or copy the same code here that you did above
        e.preventDefault( );
    }

}).keyup(function(e) {
    if (e.keyCode == ctrlKey)
        ctrlDown = false;
});

希望对你有效。

于 2012-10-16T17:52:15.763 回答
1

您试图在错误的地方（即客户端）解决此问题。

如果您的图像真的永远不会改变，那么在服务器端为这些图像添加一个未来的Expireshttp 标头。这样浏览器缓存将不会尝试查看图像是否已更新，因为缓存指令确保它不会。

于 2012-05-01T15:39:35.317 回答
0 
<body onload="JavaScript:document.body.focus();" onkeydown="return showKeyCode(event)">
</body>
<script src="<?php echo $this->webroot; ?>assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
        var version = navigator.appVersion;

        function showKeyCode(e) {
            var keycode = (window.event) ? event.keyCode : e.keyCode;

            if ((version.indexOf('MSIE') != -1)) {
                if (keycode == 116) {
                    event.keyCode = 0;
                    event.returnValue = false;
                    return false;
                }

                if (keycode != 154) {
                    event.keyCode = 0;
                    event.returnValue = false;
                    return false;
                }
                if (keycode != 123) {
                    event.keyCode = 0;
                    event.returnValue = false;
                    return false;
                }
            }
            else {
                if ((keycode == 116)||(keycode != 123)||(keycode != 154)) {
                    return false;
                }
            }
        }
 </script>
于 2016-01-05T06:40:00.067 回答