Всем привет с вами как всегда 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 можно запихать в переменную.