Остановите загрузку Javascript и HTML из кэша

Question

Я создаю одностраничное приложение javascript и при запуске приложения использую один файл javascript для загрузки любого другого файла, который мне нужен, на лету.Когда я нажимаю «обновить», согласно Firebug, моя HTML-страница, а также страницы javascript будут загружаться с ошибкой 304 Not Modified Error, и мой javascript перестает работать.

Я понимаю, что это связано с кэшированием браузера, но как я могуизбежать этого?Я загружаю исходную страницу HTML одним вызовом скрипта

<script src="js/config.js" type="text/javascript"></script>

, а затем продолжаю динамически загружать остальные из этого скрипта

window.onload = function () {
    var scripts = ['http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js', 'js/core.js', 'js/sandbox.js']; //Application scripts
    var loaded = 0;
    //Callback is executed after all scripts have been loaded.
    var callback = function () {
        if (loaded + 1 == scripts.length) {
            //Create Modules
            CORE.loader("js/modules/Login.js", function () {
                CORE.createModule('loginForm', Login);
            });

            //Create HTML bindings.
            CORE.createBinding('appContainer', '#Login', 'login.html');
            CORE.bindHTML(window.location.hash); //Loads hash based page on startup
        } else {
            loaded++;
            loadScript(scripts[loaded], callback);
        }
    };

    loadScript(scripts[0], callback);

    function loadScript(scriptSrc, callback) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = scripts[loaded];

        if (script.readyState) {
            script.onreadystatechange = function () {
                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {
            script.onload = function () {
                callback();
            };
        }

        document.getElementsByTagName('head')[0].appendChild(script);
    }
};

Я знаю, что Gmail использует куки для предотвращения этого,Кто-нибудь есть идеи, как принять этот подход?Должен ли я установить cookie на сервере, а затем проверять его с помощью JS на каждой странице загрузки / обновления и использовать что-то вроде window.location.refresh (), если cookie сообщает мне, что страница загружена из кэша?

Answer 1

Кэширование важно по соображениям производительности. Я бы порекомендовал передать номер версии в строке запроса и при каждом обновлении увеличивать номер версии. Это заставит браузер повторно отправить запрос, и он будет загружаться из кэша, если у него уже есть та же версия.

Answer 2

Чтобы раскрыть @ ответ Рамеша :

для принудительной перезагрузки файла js вместо кэша, используйте этот html:

<script src="js/config.js?v=42" type="text/javascript"></script>

в следующий раз, когда вы внесете изменения в этот файл, просто +1 v.Кстати, это также работает с CSS-файлами.

Answer 3

Я согласен со всеми остальными ответами. 304 не является ошибкой, и есть много причин, почему это поведение является правильным.

При этом существует простой "взлом", который вы можете использовать. Просто присоедините уникальный параметр URL к вызову JS.

var timestamp = +new Date;
var url = "http://mysite.com/myfile.js?t=" + timestamp;

Опять же, это взлом. Производительность мудрая, это ужасно.

Answer 4

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">  

Добавьте это в HTML-заголовок.

Answer 5

Я бы предложил использовать Javascript для генерации случайного числа, используя Math.random, умножив его, а затем Math.floor, чтобы вернуть его целое число.Затем я бы добавил этот номер к URL-адресу в качестве переменной.Поскольку число изменяется при каждой загрузке страницы, файл никогда не должен кэшироваться.

<script>
  var url="yourscript.js";
  var extra="?t=";
  var randomNum = String((Math.floor(Math.random() * 200000000000000)));
  document.getElementById('myScript').src = url+extra+randomNum;
</script>
<script id="myScript"></script>

Answer 6

<?php 
$xn = date("YmdHis");

echo  " <script	src='root.js?$xn'></script>";
?>

Answer 7

После нескольких месяцев борьбы с проблемой кэша, пытаясь что-либо сделать (включая скрипт, который изменяет URL-адреса с помощью параметра), я обнаружил пост, в котором объясняется, как это сделать с помощью IIS . * 1003.*

• Запустить IIS Manager (у меня работает INETMGR из меню «Пуск»)
• Перейти к нужному сайту в дереве подключений
• Открыть кэширование вывода
• РедактироватьПараметры функции
• Снимите флажок Включить кэш и Включить кэш ядра
• Если вы не можете сохранить изменения, убедитесь, что ваш файл web.config не помечен только для чтения
• IISRESET isтребуется для внесения изменений

Это оригинальный пост, в котором упоминается, что он имеет отношение к IIS 7.5 (в Windows 7) https://forums.iis.net/t/959070.aspx?How+do+you+disable+caching+in+IIS+

Один изпрежде я пытался добавить .html и .js в Output Caching и проверить «Prevent All Caching».Поэтому, если после IISRESET это не сработает, попробуйте это, хотя я не уверен, что это действительно необходимо.

РЕДАКТИРОВАТЬ:

Если это не сработает, все равно в IIS перейдитев заголовки ответа HTTP и добавьте новые действия:

1. Имя: управление кешем, Значение: без кеширования

2. Имя: истекает, Значение:0

Answer 8

Вам необходимо установить script.src = scripts[loaded]; после , добавив обработчики onreadystatechange / onload.В противном случае событие будет запущено до добавления обработчиков, поскольку кэшированная версия загружается мгновенно.