Как предотвратить флеш-не стилизованное содержимое при вводе класса в тело - PullRequest
0 голосов
/ 13 декабря 2010

Приветствую всех мудрецов! Мне действительно нужна ваша помощь, так как я новичок в JS / DOM. У меня есть этот скрипт, который в основном получает и устанавливает cookie, и когда конкретный элемент запускается, он будет сохранять новое значение cookie и обновлять браузер. Затем значение вводится в класс тела. Однако, я столкнулся с проблемой, когда в процессе добавления нового класса в тело он будет читать стиль по умолчанию (FOUC), прежде чем читать текущий стиль CSS, введенный в его тело.

(function ($) {</p> <pre><code>var Cookies = { init: function () { themes = Cookies.getCookie('THEME'); if (themes != null && themes != '') { document.getElementsByTagName('body')[0].className += ' custom-'+themes; } else { return; } }, setCookie: function (name, value, expired) { var expiredDate = new Date(); expiredDate.setDate(expiredDate.getDate() + expired); document.cookie = name + '=' + escape(value); (expired == null) ? '' : ';expires=' + expiredDate.toUTCString(); }, getCookie: function (name) { if (document.cookie.length > 0) { cookieStart = document.cookie.indexOf(name + '='); if (cookieStart != -1) { cookieStart = cookieStart + name.length + 1; cookieEnd = document.cookie.indexOf(';', cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } return unescape(document.cookie.substring(cookieStart, cookieEnd)); } } return ''; } }; $('.boxer').each(function () { $(this).bind('click', function (e) { e.preventDefault(); var element = $(this).attr('class').replace('boxer', '').replace(' ', ''); setTimeout(function () { Cookies.setCookie('THEME', element, 1); window.location.replace(window.location.href); }, 100); }); }); $(function () { Cookies.init(); });

}) (Jquery);

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

1 Ответ

0 голосов
/ 13 декабря 2010

Попробуйте установить тему в теге body, не обновляя браузер.Одна из замечательных особенностей jQuery заключается в том, что вы можете добавить новый класс тела без необходимости обновлять страницу.Вы все равно должны установить cookie, потому что это важно для остальной части веб-сайта.

При переходе от страницы к странице вам потребуется использовать некоторый серверный язык сценариев для чтения и записи файла cookie.соответствующий класс CSS на теге body до загрузки страницы в браузере.В PHP это выглядело бы примерно так:

<body <?php if(isset($_COOKIE['THEME'])) { echo 'class="'.$_COOKIE['THEME'].'"'; } ?>>

Я бы не советовал пробовать это с одним JavaScript по той причине, что вы заявили, что страница будет загружаться и не будет стилизована, пока не будет запущен механизм JavaScriptвеб-браузер и добавьте нужные классы CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...