На главную

Комментарии

анонимно

"О, сколько нам открытий чудных..."



Несколько интересных "открытий" было совершено в борьбе за кроссбраузерность клиентской части нового чата. Два дня жесткого секса с кодом и гуглом выявили мои глубокие чувства к ослобраузерам ИЕ. В двух словах:

Задача: надо создать группу радиобатонов и поместить их в контейнер в документе.

Решение: тривиальное

 for (var i=0; i<5; i++){
var rb = document.createElement("input");
rb.type = "radio";
rb.name = "group1";
holder.appendChild(rb);
}

всё хорошо и красиво, все плачут от счастья... пока в голову не приходит мысль на наши радиобатоны покликать. В ИЕах не кликается. Ваще.
Перекапывается код на предмет неточностей, несоответствия стандартам - всё вроде правильно. Поиски в гугле выявляют, что наш ненаглядный осёл, оказывается, не может некоторым динамически создаваемым элементам задавать name. Многие даже советуют забивать хер на DOM и херачить всё в innerHTML. 

Более глубокие поиски дают (как обычно в нашем деле) некий грязный хак. Общая схема такова: ловим эксепшн вокруг кода с ИЕ-синтаксисом, в обработчике пишем код по стандартам для всех остальных браузеров:

 ...
try {
result = document.createElement("<input type='radio' name='group1'>");
} catch (e) {
result = document.createElement("input");
result.type = "radio";
result.name = "group1";
}
...

Ну из других мелких сюрпризов обнаружилось так же, что в Opera, оказывается, у document есть свойство all, что делает не логичным определение ослобраузеров по if (document.all) {/* some IE code */}.

Так же, хоть многие и утверждали, что в стандартах нет обработчиков события onload для img, обработчики всё-таки есть:

 var img = new Image();
img.onload = OnLoadHandler;
img.src = "/path/to/image.jpg";

function OnLoadHandler(e) {
/* Image loaded */
}

Тут тоже есть интересные особенности:

1. задавать обработчик события необходимо раньше свойства src, т.к. в противном случае он не сработает, если картинка найдена в кеше (не уверен, возможно только для нашего любимого ИЕ);

2. не-ИЕ-браузеры передают в обработчик события параметр e (собственно наше событие), в котором есть ссылка на объект, породивший событие - e.currentTarget. Для ослобраузера сие не верно и надо брать window.event. В случае с картинками - в ИЕ оба параметры, увы, пусты, поэтому, чтобы определить, какая именно из картинок догрузилась, можно использовать задание ссылки на обработчик вида:

 img.onload = function() {OnLoadHandler(this);}

Тогда в обработчик нам придёт сама картинка.

 

Ещё какие-то были интересности, но я уже не помню. Вспомню - напишу %) 

,

← Вернуться к журналу «Узелки на память...»

Комментарии

  • мы все умрем

  • Разница есть.

  • форма именно как form
    все равно как выводить, через appendChild или innerHTML, в принципе-то. как бы все ни было устроено. правда если объект расширяем - тогда только dom

  • Представь, что у тебя есть бизнес-объект определённого класса на клиенте и есть шаблон его графического представления.
    Используя минимум DOM-манипуляций и закешированный шаблон можно выводить различные экземпляры объектов этого класса без жёсткой привязки к отображению - т.е. классическая архитектурная модель с разделением по слоям.
    В твоём комментарии форма - это form или это отображение (UI)?

  • смысл задрачиваться с dom-ом есть только если ты конструируешь форму, по сути. если что-то другое, что можно просто передать парой параметров через аякс, без сериализации формы, тогда можно просто генерить хтмл.
    мое мнение ) хотя последнее время генерить хтмл уже просто не интересно и конструирую все в доме )

  • Ну, стало быть, я облегчил твои страдания )

  • чЁтакЭ?

  • Ох знал бы ты... знал бы ты как...

  • Витя, похоже, описанные проблемы уже давно терзают твой ум )

  • Извините. Не сдержался.

  • Ах тыж ебаный ты нахуй!

Новый комментарий

Скрытое сообщение