Всем привет с вами как всегда lexx821! У меня была как-то такая проблема как обновление CSS, JavaScript, HTML так-как всё это кэшируется и лейаут отображается старый, недавно пришла гениальная мысль, как мне решить проблему если закэшированы CSS, JavaScript, HTML файлы, вот я хочу с вами поделиться бесплатно своей идеей. Короче версию я запихал в CSS файл, потом проверяю версию спомощью JavaScript:
Файл main.css:
body { background-color:yellow; }
#version { visibility:hidden; } /* Невидимый div */
#version::before { content:"1.0.0"; } /* Версия 1.0.0 */
Новый файл newmain.css:
body { background-color:red; }
#version { visibility:hidden; } /* Невидимый div */
#version::before { content:"1.0.1"; } /* Версия 1.0.1 */
Файл содержащий текущую версию curr_ver.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('curr_ver.html', 'GET', '', (data) => {
if(data != version) { /* Проверяю версию, из скрытого Divа, если в файле curr_ver.html новее версия чем в css, то загружаю новый css файл */
var el = document.getElementsByTagName('link');
el[0].setAttribute('href', 'newmain.css');
}
});
}
</script>
</head>
<body>
<div id="version"></div>
</body>
</html>
Это я проверял, и вроде бы всё это работает. Аналогично можно сделать для проверки JavaScript файла. Так-же открываете спомощью ajax файл, только версию javascript можно запихать в переменную.