Примерно так: Написано местами коряво, ибо, как уже писАл выше javascript нэ-на-вы-жу и старался быстрее закончить
Полный текст не даю, т.к.коллеги против
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Control pannel</title> <style> .my_iframe { position: absolute; border: 0; } #head { left: 0; width: 100vw; top: 0; height: 50px; } #menu { left: 0; width: 200px; top: 50px; height: calc(100vh - 50px); } #content { left: 200px; width: calc(100vw - 200px); top: 50px; height: calc(100vh - 50px); } </style> <script id="jquery_js"></script> <script id="javascript_js"></script> </head> <body> <iframe src="about:blank" name="head" class="my_iframe" id="head"> <p>Your browser does not support iframes.</p> </iframe> <iframe src="about:blank" name="menu" class="my_iframe" id="menu"></iframe> <iframe src="about:blank" name="content" class="my_iframe" id="content"></iframe> <script type="text/javascript"> // // Кешированный доступ к серверу // В качестве хранилища используется sessionStorage // // Очистка кеша - вызывается один раз из index.html function cacheInit() { //console.log("cache init"); sessionStorage.clear(); } // Загрузка url в объект с селектором sel из doc // Если в кеше ещё нет, производится загрузка в кеш и после этого перенос в объект // Если в процессе загрузки возникает тайм-аут, сессия прерывается и делается новый запрос // По завершении загрузки вызывается callback // Для всех типов файлов кроме .js нужен jQuery !!! function cacheLoad(doc, url, sel, callback) { doc.body.style.cursor = 'wait'; var content = _cache_read(url); if (content == undefined) { // В кеше нет - иду на сервер //console.log("cache load '" + url + "' from host"); _cache_read_host(url, function () { cacheLoad(doc, url, sel, callback); }); } else { // В кеше есть - подключаю к объекту //console.log("cache read '" + url + "' from cache"); // Действия в завилсимости от типа файла var ext = _cache_get_xtension(url); switch (ext) { case "htm": //console.log("cache inst '" + url + "' as webpage"); // Переношу в страницу $(sel, doc).attr("srcdoc", content).attr("src", url); break; case "js": //console.log("cache inst '" + url + "' as javascript"); // Скрипты обрабатываются до jQuery, так что ID нужен без # if (sel.charAt(0) == '#') { console.warn("cache inst '" + url + "' # not need in the selector for javascript !!!"); sel = sel.substr(1); } // Получаю объект или создаю, если не найден var js = doc.getElementById(sel); if (js == null) { js = document.createElement("SCRIPT"); js.id = sel; } // Переношу в скрипт js.type = "text/javascript"; js.innerHTML = content; break; case "jpg": //console.log("cache inst '" + url + "' as image"); // Переношу base-64 в картинку $(sel, doc).attr("src", "data:image/jpeg;base64," + content); break; case "gif": //console.log("cache inst '" + url + "' as image"); // Переношу base-64 в картинку $(sel, doc).attr("src", "data:image/gif;base64," + content); break; case "png": //console.log("cache inst '" + url + "' as image"); // Переношу base-64 в картинку $(sel, doc).attr("src", "data:image/png;base64," + content); break; case "css": //console.log("cache inst '" + url + "' as css"); // Переношу в страницу (добавляю в элемент с типом STYLE) $(sel, doc).append("\n" + content); break; default: //console.error("cache inst '" + url + "' unknown file type '" + ext + "' !!!"); break; } doc.body.style.cursor = 'auto'; // Если задан callback, вызываю if (callback != undefined) { callback(); } } } // Рекурсивная "групповая" загрузка и кеширование скриптов // doc - document, откуда вызвана функция // В массиве пары URL - селектор объекта, в который грузить // Если очередной объект == null, значит всё загружено и вместо URL - callback // index - индекс для рекурсивного вызова function cacheLoadMulti(doc, list, index) { // Это первый вызов ? if (index == undefined) { index = 0; } // Это последний вызов ? if (list[index + 1] == undefined) { callback = list[index]; if (callback != undefined) { callback(); } return; } // Гружу очередной URL var url = list[index]; var obj = list[index + 1]; cacheLoad( doc, url, obj, function () { cacheLoadMulti(doc, list, index + 2); } ); } // Внутренняя функция - фозвращает имя файла без параметров function _cache_get_fname(url) { // Отсекаю параметры var fname = url.split("?"); return fname[0]; } // Внутренняя функция - выделяет расширение файла function _cache_get_xtension(url) { // Отсекаю параметры ext = _cache_get_fname(url); // Получаю расширение ext = ext.split("."); ext = ext[ext.length - 1]; return ext; } // Внутренняя функция - читает из кеша содержимое файла // Если такого нет, возвращает undefined function _cache_read(url) { var fname = _cache_get_fname(url); var content = sessionStorage.getItem(fname); if ((content == undefined) || (content == null)) { return undefined; } var c = JSON.parse(content); if ((c == undefined) || (c == null)) { sessionStorage.removeItem(fname); return undefined; } if ((c.content == undefined) || (c.content == null)) { sessionStorage.removeItem(fname); return undefined; } return c.content; } // Внутренняя функция - загрузка с сервера в кеш c перезапросами по тайм-ауту function _cache_read_host(url, callback) { var xmlhttp = new XMLHttpRequest(); var timer = undefined; var timer_restart = 0; function on_timeout() { //console.warn("cache load '" + url + "' timeout"); timer = undefined; timer_restart = 1; xmlhttp.abort(); _cache_read_host(url, callback) } xmlhttp.onreadystatechange = function () { if (timer_restart != 0) { return; } // Перезапускаю таймер if (timer != undefined) { clearTimeout(timer); } timer = setTimeout(on_timeout, 5555); if (xmlhttp.readyState == 4) { // Останавливаю тавймер if (timer != undefined) { clearTimeout(timer); } if (xmlhttp.status == 200) { //console.log("cache load '" + url + "' ok"); // Тип содержимого по расширению var payload; switch (_cache_get_xtension(url)) { case "ico": case "gif": case "png": case "jpg": // Интерпретирую как бинарные данные и преобразую в строку base-64 var arr = new Uint8Array(xmlhttp.response); var raw = String.fromCharCode.apply(null, arr); payload = btoa(raw); break; default: // Интерпретирую как строку Unicode payload = new TextDecoder().decode(xmlhttp.response); break; } // Пишу в кеш sessionStorage.setItem(_cache_get_fname(url), JSON.stringify({ content: payload })); // Если нужно - вызываю колбэк if (callback) callback(); } else { //console.warn("cache load '" + url + "' error " + xmlhttp.status); // При ошибке выззываю сам себя ещё раз setTimeout(function () { _cache_read_host(url, callback); }, 111); } } } // Запускаю запрос xmlhttp.open("GET", url, true); xmlhttp.responseType = "arraybuffer"; xmlhttp.send(null); } // Обертка для GET-запроса к cgi-bin/ajax.cgi с перезапросом по тайм-ауту function smartGet(obj, oncomplete, timeout) { if (timeout == undefined) { timeout = 5555; } $.ajax({ url: "cgi-bin/ajax.cgi", data: obj, timeout: timeout, success: oncomplete, error: function () { //console.warn("$.get '" + JSON.stringify(obj) + "' timeout"); setTimeout(function () { smartGet(obj, oncomplete, timeout); }, 111); } }); } // ---------------------------------------------------------------------------------------- // // Отсюда начинается выполнение скрипта // Дожидаюсь, пока загрузится страница и начинаю // window.onload = function () { // Очищаю кеш cacheInit(); // Загружаю скрипты var load_instructions = [ "js/jquery.js", "jquery_js", "js/javascript.js", "javascript_js", AfterPageReady ]; cacheLoadMulti(document, load_instructions); }; // Вызыается после того, как все элементы страницы загрузились function AfterPageReady() { // Запрашиваю имя и версию устройства для заголовка страницы // Большой тайм-аут для того, что бы успеть ввести пароль smartGet({ device_name: "", app_version: "", snmp: "get" }, OnRqComplete, 30000); } function OnRqComplete(data) { // Разбираю ответ var obj = jQuery.parseJSON(data); // Жду, пока все переменные станут доступны if ( (obj.device_name == undefined) || (obj.app_version == undefined) || (obj.snmp_on == undefined)) { window.setTimeout(AfterPageReady, 1234); return; } // Заголовок окна var tstr = decodeURI(obj.device_name) + " v." + (obj.app_version >> 8) + "." + (obj.app_version % 256); if (obj.snmp_on == 1) { tstr += " - " + fromUTF8(obj.snmp_syslocation); } document.title = tstr; // Загружаю и отображаю заголовок var load_instructions = [ "header.htm", "#head", undefined ]; cacheLoadMulti(document, load_instructions); } // Вызывается со страницы заголовка после того, как она полностью загрузилась function OnHeaderComplete() { // Загружаю и отображаю меню var load_instructions = [ "menu.htm", "#menu", undefined ]; cacheLoadMulti(document, load_instructions); } // Вызывается со страницы меню после того, как она полностью загрузилась function OnMenuComplete() { // Загружаю и отображаю страницу var load_instructions = [ //"tun.htm?num=1", "#content", "inp.htm", "#content", undefined ]; cacheLoadMulti(document, load_instructions); } </script> </body> </html>
-
- Спасибо... ну очень много букв - IBAH(18.06.2019 16:31)
- Или так (попроще и еще корявее ;) Гудвин(10564 знак., 18.06.2019 12:16)
- Спасибо... но букв все равно много - IBAH(18.06.2019 16:32)