Другой контент для IE6 через JS

[Ateiri]

Привет всем-всем!

 

В общем цель, написать валидный, а так же кроссбраузерный сайт  с IE6 включительно.

IE6 эхом отдается в моей голове и я уже не первый день ругаюсь в поисках решения.

 

У меня были проблемы с отображением блоков в IE6, но совершенно не хотелось верстать таблицами и прочими дьявольскими методами.

Да-да, я решил написать JS, который должен найти dom-элемент по id (блок) и заменить его содержимое, содержимым из файла notify.html. 

 

Мое рассуждения свелись к XMLHttpRequest. Именно он играет важную роль в загрузке нашего html файла.

function readFile(file,callback,cache) {   var rawFile = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");   rawFile.open('GET', file+(cache=(cache===true) ? '?r='+Math.random() : ''), true);   rawFile.onreadystatechange = function() {      if(rawFile.readyState===4) {         if(rawFile.status===200||rawFile.status==0) {         args={};         callback.call(rawFile.responseText, args);         }      }   }   rawFile.send(null);}

Первый аргумент в функции это путь к нашему файлу, второй callback, третий убирает кеширование добавление ?r=рандомное число.

Мы запускаем нашу callback функцию в контексте rawFile.responseText и на всякий добавляет args аргументы.

 

 

Функция определения браузера <IE6.

function findIE6() {   if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){      var ieversion=new Number(RegExp.$1);      if (ieversion<=6) return true;   }}

Прелестно, теперь <IE6 в рукаве, идем дальше.

 

 

Функция записи/замены контента в блок с ID.

function setContent(id) {   var obj = document.getElementById(id);   obj.innerHTML=this;}

obj.innerHTML=this рассмотрим дальше.

 

 

Функция scriptLoader можно назвать init'ом на нашем сайте.

Данная функция просто запускает другие.

function scriptLoader() {   if(findIE6()==true) {   readFile('/ie6/notify.html', function() {      setContent.call(this,'notify');    }, true);      }					}				scriptLoader();

Ну собственно если IE6 найден, выполняем нашу функцию readFile.

Опять же, первый аргумент это путь к файлу, второй аргумент это callback функция, которая запускается в контексте rawFile.responseText (помните?), а функция внутри setContent, запускается в контексте нашей обертки.

 

По сути я сам боюсь даже это объяснить, exp'ы не хватает, но суть в obj.innerHTML=this, где this и есть наш rawFile.responseText.

 

__________________________________________________________________________________________________

 

 

Ладно-ладно, помудрили и хватит. Все действительно работает, загружается, вставляется, НО вставляется исключительно PLAIN TEXT.

Т.е. на html элементы реакции нет. Для наглядности вышлю скриншот.

 

https://www.dropbox.com/s/qkoo30i170j8h1e/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202013-12-18%2014.51.54.png

 

p.s. Скорее всего проблема в том, что сама по себе data является текстовым узлом и никак не ассоциируется с dom элементами. Следовательно нужно написать html парсер.

 

Что скажите господа и дамы, есть идеи?

Заранее благодарю!

Мне кажется или решение с php будет удобнее и быстрее во всех смыслах...

Edited December 18, 2013 by Ateiri

[Great Rash]

Во-первых, зачем вам ИЕ6? Спортивный интерес? По моим данным (штук пять сайтов с около миллиона зарегистрированных пользователей) доля ИЕ6 равна нулю.

Во-вторых, какая реакция вам требуется? Из вашего описания это непонятно. Да responseText возвращает plain text, но при вставке через innerHTML он превращается в DOM-элементы.

В третьих, оба решения (JS и PHP) ущербны. ИЕ6 и так медленный браузер (скорость JavaScript там оставляет желать лучшего), а вы еще и мега-перестройку DOM там затеваете, а это одна из самых дорогих операций в браузере. Почему бы просто не использовать conditional comments? Это будет быстрее во много раз и правильней.

[Ateiri]

Во-первых, зачем вам ИЕ6? Спортивный интерес? По моим данным (штук пять сайтов с около миллиона зарегистрированных пользователей) доля ИЕ6 равна нулю. Во-вторых, какая реакция вам требуется? Из вашего описания это непонятно. Да responseText возвращает plain text, но при вставке через innerHTML он превращается в DOM-элементы. В третьих, оба решения (JS и PHP) ущербны. ИЕ6 и так медленный браузер (скорость JavaScript там оставляет желать лучшего), а вы еще и мега-перестройку DOM там затеваете, а это одна из самых дорогих операций в браузере. Почему бы просто не использовать conditional comments? Это будет быстрее во много раз и правильней.

 

Мне поставили такую задачу, IE6 и все, ничего личного.

 

А я ведь даже заново переписывал, чтобы объяснить как можно проще. Хорошо, еще раз.

Взгляните на второй скриншот. Там где <p><h1 и т.п. (2 строки). Ага, вот именно эти 2 строки будут вместо блока слева.

Посмотрите, эти 2 строки совершенно игнорируют свои html-теги, на выходе лишь plain text. А самое удивительное, alert(obj.innerHTML) выводит строку с тегами так, как надо.

Что же получается, innerHTML не пашет?

[Great Rash]

Мне поставили такую задачу, IE6 и все, ничего личного.

Тогда вопросов больше нет.

Из скрина ничего не понятно. С чего вы взяли, что они игнорирую теги? Если бы на выходе был plain text, то в браузере вы бы увидели не hi world@, а <h1>hi world@</h1>. Если вы самих тегов не видите, значит всё ок. А то что размер не такой, так это может в стилях что-то не так.

[Ateiri]

Ну стили стандартные, точно не в них дело. Алерт выдает с тегами.

Меня очень смутил факт, что при просмотре исходного кода, эти 2 новые строки не упоминаются вообще, а старый контент не смотря на его визуальное отсутствие, в коде прописан.

Т.е. это чисто клиентские операции... Я что-то совсем ничего не понимаю.

Я приношу свои извинения! Действительно все прекрасно работает и я совсем не учел файл reset.css, который обнулял h1-h5 теги и.т.п.

[Great Rash]

Меня очень смутил факт, что при просмотре исходного кода, эти 2 новые строки не упоминаются вообще, а старый контент не смотря на его визуальное отсутствие, в коде прописан.

Это особенности девелопер тулзов от Microsoft - они дерьмовые.

[Ateiri]

 

Это особенности девелопер тулзов от Microsoft - они дерьмовые.

 

 

Дык, хром тоже не показывает как и остальные браузеры.

[Great Rash]

Дык, хром тоже не показывает как и остальные браузеры.

А вот в это я не поверю пока не увижу.

[Ateiri]

А вот в это я не поверю пока не увижу.

 

 

Может мы о разных вещах говорим?

Я немного переделаю скрипт, чтобы он заменял блок в хроме и пришлю скриншот с кодом)

Верно, может я огляделся) В хроме все меняется)