У меня вопрос из двух частей.
Во-первых, сценарий:
Из-за некоторых странных проблем, с которыми мы столкнулись в связи с поддержкой NOSCRIPT мобильным браузером, мне поручено придумать альтернативное решение для «обнаружения» JS. Логика решения состоит в том, чтобы на странице было два DIV. Одна из них - ошибка, указывающая, что у вас нет JS, и он отображается по умолчанию. Если у кого-то есть JS, мы хотим добавить новый блок STYLE в HEAD, который заменяет предыдущий CSS и скрывает ошибку, а вместо этого показывает содержимое.
Пример HTML:
<div id="div1">div 1 (should be shown if JS enabled)</div>
<div id="div2">div 2 (should be hidden if JS enabled)</div>
Это JS, с которого я начал:
var styleNode = document.createElement('style');
styleNode.setAttribute("type", "text/css");
styleNode.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
headTag.appendChild(styleNode);
Но у меня были проблемы. Некоторый поиск в Google приводит к такому описанию проблемы безопасности, которая может возникнуть в IE, если вы попытаетесь вставить innerHTML в созданный элемент перед его размещением в DOM:
http://karma.nucleuscms.org/item/101
Итак, я модифицировал скрипт как таковой:
var styleNode = document.createElement('style');
styleNode.setAttribute("type", "text/css");
var headTag = document.getElementsByTagName("head")[0];
headTag.appendChild(styleNode);
var aStyleTags = headTag.getElementsByTagName("style");
var justAddedStyleTag = aStyleTags[aStyleTags.length-1];
justAddedStyleTag.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
вопрос 1: это допустимый способ решения проблемы IE? Есть ли более эффективное решение?
вопрос 2: даже после настройки скрипт все равно не работает в IE. Он отлично работает в Firefox, но в IE 7 я получаю «неизвестную ошибку времени выполнения».
У меня есть образец этого кода на JSBIN:
Кто-нибудь знает, что происходит с IE?
ОБНОВИТЬ:
Наткнулся на эту ссылку через гугл. Обратите внимание на последний комментарий:
http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx
Тем не менее, вы действительно должны поместить все правила стиля в HEAD для строгого соблюдения XHTML. Это также может быть немного сложно, потому что вы не можете использовать innerHTML для непосредственного внедрения в элемент HEAD или STYLE. (Оба эти тега ТОЛЬКО ДЛЯ ЧТЕНИЯ.)
Ээп! Истинный? FireFox просто слишком снисходителен? Или это просто очень странная причуда IE?
ОБНОВЛЕНИЕ 2:
Еще немного о том, что мы пытаемся здесь решить. Мы имеем дело с мобильными устройствами, и некоторые из устаревших устройств а) не поддерживают NOSCRIPT и б) имеют медленные движки JS.
Поскольку они не поддерживают NOSCRIPT, мы по умолчанию показываем ошибку, затем скрываем ее через JS, если она есть, и представляем им надлежащий контент. Из-за медленных движков JS на них люди видят «мерцание» отображения / скрытия DIV. Это было предложенное решение, чтобы справиться с этим, поскольку оно загружало бы CSS до того, как DIV даже были отрисованы.
Поскольку он кажется недействительным, решение будет заключаться в том, что на этих старых устройствах мы будем использовать этот метод (поскольку он, кажется, работает, даже если не в IE), а затем все остальные подходящие браузеры будут работать так, как было предложено ... мы Просто обновлю свойство DISPLAY CSS через встроенный JS после загрузки каждого DIV в DOM.
С учетом всего сказанного мне все еще любопытно, является ли эта проблема ошибкой IE, или IE действительно придерживается надлежащих стандартов, делая STYLE элементом только для чтения.
