Всем привет, была такая проблема как обновление js, css, html файлов, т.к. всё это кэшируется и лейаут отображается старый, недавно пришла гениальная идея, как решить проблему если закэшированы css, js, html файлы, вот хочу поделиться бесплатно своей идеей. Короче версию я запихал в css файл, потом проверяю версию спомощью javascript:
Старый файл main.css:
body { background-color:yellow; }
#version { visibility:hidden; } /* Невидимый Div */
#version::before { content:"1.2.3"; } /* Версия 1.2.3 */
Новый файл main2.css:
body { background-color:red; }
#version { visibility:hidden; } /* Невидимый Div */
#version::before { content:"1.2.4"; } /* Версия 1.2.4 */
Текущая версия getcurrversion.html:
1.2.4
Основной файл index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="main.css">
<script>
function ajax(url, method, param, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
callback(this.responseText);
}
}
xhttp.open(method, url, true);
if(method == 'POST') {
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send(param);
}
else
xhttp.send();
}
window.onload = function() {
var version = window.getComputedStyle(document.getElementById('version'), ':before').getPropertyValue('content'); /* Получаю из свойство content из version::before */
ajax('getcurrversion.html', 'GET', '', (data) => {
if(data != version) { /* Проверяю версию, из скрытого Divа, если в файле getcurrversion.html новее версия чем в css, то загружаю новый css файл */
var el = document.getElementsByTagName('link');
el[0].setAttribute('href', 'main2.css');
}
});
}
</script>
</head>
<body>
<div id="version"></div>
</body>
</html>
Проверял, вроде работает. Сначало отображается жёлтый фон, т.к. в main.css стоит body { background-color:yellow; }, а потом быстро становится красным, т.к. загружается main2.css, т.к. там стоит body { background-color:red; }. В javascript тоже можно в переменную/константу запихать версию, и так-же проверть, и вместо
var el = document.getElementsByTagName('link');
el[0].setAttribute('href', 'main2.css');
заменить на
var el = document.getElementsByTagName('script');
el[0].setAttribute('src', 'имяфайла.js');
У кого-нибудь может найдётся идея получше?