javascript 如何使用完全缓存手动触发 F5 键和重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10399889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trigger F5 key and reload page manually with full cache use
提问by Janning
We have a web page which is often reloaded by clicking F5 or Ctrl-R just for sake of looking if some new data arrived.
我们有一个网页，它经常通过单击 F5 或 Ctrl-R 重新加载，只是为了查看是否有新数据到达。
All images in this page have a cache foreverheader, so should never be reloaded by the browser.
此页面中的所有图像都有一个永久缓存标题，因此不应由浏览器重新加载。
But when a user presses F5 most browsers check every cache entry with a request and a if-modfied-since header. Our HTML page is never cached anyway but the images should be cached for a long time and there is no need to ask if the image was modified. It is a useless request and we want to get rid of it.
但是当用户按下 F5 时，大多数浏览器会使用请求和 if-modfied-since 标头检查每个缓存条目。我们的 HTML 页面无论如何都不会被缓存，但是图像应该被缓存很长时间，并且不需要询问图像是否被修改。这是一个无用的请求，我们想摆脱它。
We have a reload icon on our page but users will still use the keyboard to reload (I would rather too).
我们的页面上有一个重新加载图标，但用户仍将使用键盘重新加载（我也愿意）。
So I tried to trigger F5 and Ctrl-R keys and do the reload manually like this (btw we are using jquery):
所以我尝试触发 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 && e.which == 82;
}
function triggerReloadKeys(e) {
if (isF5(e) || isCtrlR(e)) {
$('#reload').click();
}
}
$(document).bind("keydown", triggerReloadKeys);
$('#reload').click(loading);
someimg.png is always delivered with a long lasting cache directive.
someimg.png 总是带有一个持久的缓存指令。
My first answer would be to tell me not taking over the users browser and let him refresh if he wants to. You are right, but we something up to 5000 pages/sec in peak time. And even more images because everybody is reloading the page all the time. We just want to scale down the amount of request, regardless of how fast they are. (and I know that I can't trigger the browser refresh button in the menu bar, but I don't care about it right now).
我的第一个答案是告诉我不要接管用户浏览器，如果他愿意，让他刷新。你是对的，但我们在高峰时间高达 5000 页/秒。甚至更多的图像，因为每个人都一直在重新加载页面。我们只想减少请求的数量，不管它们有多快。（而且我知道我无法触发菜单栏中的浏览器刷新按钮，但我现在不在乎）。
We were pretty successful with reducing the amount of requests in our App as we just don't have any reload button or F5 but everybody is forced to use our own HTML reload link.
我们非常成功地减少了应用程序中的请求数量，因为我们没有任何重新加载按钮或 F5，但每个人都被迫使用我们自己的 HTML 重新加载链接。
What is possible is to disable the F5 key all together like this:
有可能像这样一起禁用 F5 键：
function triggerReloadKeys(e) {
if (isF5(e) || isCtrlR(e)) {
return false;
}
}
I don't know if it's even possible to trigger F5 and force a reload while still using the cache and mimic the behaviour of clicking another link on the page.
我不知道是否有可能在仍然使用缓存的同时触发 F5 并强制重新加载并模仿单击页面上另一个链接的行为。
Any ideas?
有任何想法吗？
回答by Hamid Sarfraz
I assume you did not get your answer yet.
我想你还没有得到答案。
This is what I am using on my website:
这是我在我的网站上使用的：
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;
});
Hope it works for you.
希望对你有效。
回答by Francis Avila
You are trying to solve this problem in the wrong place (i.e. on the client).
您试图在错误的地方（即在客户端）解决此问题。
If your images truly never change, then add a far-future Expireshttp header on the server sideto those images. This way the browser cache will not attempt to see if the image has been updated because the caching directive assures that it will not.
如果您的图像真的永远不会改变，那么在服务器端为这些图像添加一个未来的Expireshttp 标头。这样浏览器缓存就不会尝试查看图像是否已更新，因为缓存指令确保它不会更新。
回答by Dsu Menaria
<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>
