У меня вопрос двух частей.
Во-первых, сценарий:
Из-за некоторых странных проблем, с которыми мы столкнулись в отношении поддержки мобильных браузеров 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);
Но у меня были проблемы. Некоторые поисковые запросы, приводящие к этому описанию проблемы безопасности, которую может иметь IE, если вы попытаетесь вставить innerHTML в созданный элемент, прежде чем поместить его в DOM:
http://karma.nucleuscms.org/item/101
Итак, я модифицировал script как таковой:
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: даже с настройкой, script все еще не работает в IE. Он отлично работает в Firefox, но в IE 7 я получаю "неизвестную ошибку времени выполнения".
У меня есть образец этого кода в JSBIN:
Кто-нибудь знает, что происходит с IE?
UPDATE:
Я наткнулся на эту ссылку через google. Обратите внимание на последний комментарий:
http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx
Тем не менее, вы действительно должны положить все правила стиля в HEAD для строгого соответствие XHTML. Это можно сделать также быть немного сложным, потому что вы не может использовать innerHTML для инъекции непосредственно HEAD или STYLE. (Оба эти тега читаются ТОЛЬКО.)
Eep! Правда? Является ли FireFox чрезмерным прощением? Или это просто очень странный IE quirk?
ОБНОВЛЕНИЕ 2:
Немного больше о том, что мы пытаемся решить здесь. Мы имеем дело с мобильными устройствами и некоторыми устаревшими устройствами: а) не поддерживают NOSCRIPT и b) имеют медленные JS-двигатели.
Так как они не поддерживают NOSCRIPT, мы по умолчанию показываем ошибку, а затем скрываем ее через JS, если она есть, и представляя их с соответствующим контентом. Из-за медленных двигателей JS на них люди видят "мерцание" DIV, показывающее/скрывающееся. Это было предлагаемое решение для обработки этого, поскольку оно загрузило бы CSS до того, как DIVs были даже отображены.
Так как он кажется недействительным, решение будет состоять в том, что на этих старых устройствах мы будем использовать этот метод (поскольку он работает, даже если не в IE), а затем все другие соответствующие браузеры будут делать, как было предложено... мы просто обновим свойство DISPLAY CSS через встроенный JS после того, как каждый DIV будет загружен в DOM.
Все, что сказал, мне все еще интересно узнать, является ли эта проблема ошибкой IE, или если IE действительно придерживается надлежащих стандартов, делая STYLE элементом только для чтения.