2

新しいデータが到着したかどうかを確認するためだけに、F5 または Ctrl-R をクリックして頻繁に再読み込みされる Web ページがあります。

このページのすべての画像には永久キャッシュヘッダーがあるため、ブラウザで再読み込みしないでください。

しかし、ユーザーが 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

この問題を間違った場所 (クライアント上) で解決しようとしています。

画像がまったく変更されない場合は、サーバー側でExpires遠い未来のhttp ヘッダーをそれらの画像に追加します。この方法では、キャッシュ ディレクティブによって画像が更新されないことが保証されるため、ブラウザー キャッシュは画像が更新されたかどうかを確認しようとしません。

于 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 に答える