Даже у этого метода есть некоторые недостатки: во-первых, двойная загрузка требует дополнительной пропускной способности и немного задерживает видимость пользователя. Это не имеет значения на типичных рабочих столах. Но на портативных устройствах это может быть неприемлемо. И во-вторых, это приведет к хаосу с SEO. Вторая страница, которая должна быть невидимой и доступной только с первой страницы, может отображаться независимо в веб-индексах, поэтому пользователи могут легко получить к ней прямой доступ (возможно, вы сможете «исправить» это с помощью умного использования «канонического» и / или "мета ... роботы"). И поисковая выдача начальной страницы может резко упасть, когда ее единственным содержанием является предупреждающее сообщение.
я есть вопрос из двух частей.
Сначала сценарий:
Из-за некоторых странных проблем, с которыми мы столкнулись в связи с поддержкой мобильных браузеров 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
Итак, я изменил скрипт так:
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. (Оба эти тега только для чтения.)
Eep! Правда? FireFox просто чрезмерно прощает? Или это просто очень странная особенность IE?
ОБНОВЛЕНИЕ 2:
Немного больше информации о том, что мы пытаемся решить здесь. Мы имеем дело с мобильными устройствами, и некоторые из устаревших устройств а) не поддерживают NOSCRIPT и б) имеют медленные движки JS.
Так как они не поддерживают NOSCRIPT, мы по умолчанию показываем ошибку, затем скрываем ее через JS, если она есть, и представляем им соответствующий контент. Из-за медленных движков JS на них люди видят «мерцание» показа / скрытия DIV. Это было предлагаемое решение, чтобы справиться с этим, так как он будет загружать CSS еще до того, как DIV будут отображены.
Так как он кажется недействительным, решение будет состоять в том, что на этих старых устройствах мы будем использовать этот метод (как это кажется, работает, даже если не в IE), а затем все другие правильные браузеры будут делать, как предлагается ... мы Я просто обновлю свойство DISPLAY CSS через встроенный JS после каждой загрузки DIV в DOM.
Несмотря на все сказанное, мне все еще интересно, является ли эта проблема ошибкой IE, или же IE действительно придерживается надлежащих стандартов, делая STYLE элементом только для чтения.