Ошибка "операция прервана" в MS Internet Explorer 6 и 7
Про работу В мемориз JavaScript
Сегодня столкнулся с сабжем в wordpress. Оказалось причиной вроде как явился плагин LightBox 2, но проблема (по крайней мере на моем компе) плавающая т.е. возникает не всегда.
После копания в гугле вяснилось, что мокрософт знает о существовании проблемы "Internet Explorer cannot open the Internet site http://.com. Operation aborted.". Проблема возникает если "This problem occurs because a child container HTML element contains script that tries to modify the parent container element of the child container. The script tries to modify the parent container element by using either the innerHTML method or the appendChild method.". А если по русски "Возникает это, потому что дочерний контейнер содержит скрипт, изменяющий родительский контейнер.".
На мокрософте в качестве багфикса предлагют обновиться до IE 8 или править скрипты. Вот пример кривого скрипта (вызывающего ошибку и ИЕ):
<html>
<body>
<div>
<script type="text/Javascript">
document.body.innerHTML+="sample text";
</script>
</div>
</body>
</html>
И вот пример как нужно правильно:
Новый антиспам
В связи с тем что в предыдущем посте в каментах общаются между собой роботы, попробую использовать новую антиспам систему при размещении комментариев.
О том что и как работает позже, главное что теперь не нужно вводить ненавистный защитный код с картинки, все делает ява-скрипт без участия человека.
Эффективность нового антиспама будет тестироваться на этом посте (надеюсь что на него накинутся роботы) и еще надеюсь что они не зафлудят мне весь блог ввиду возможных косяков в антиспаме.
В общем ждем, велкам писать каменты...
Продвинутый SELECT
Встала проблема: надо на странице сделать select-box с множественным выбором, но такой чтоб глупый юзверь выбирал не удерживая ctrl, а ставил галочки по привычке, потому что объяснить ему как по-другому нереально...
Решений у проблемы как всегда два: простое, вместо селекта на страничке вывалить галки в div-е, но переделав дофига всего, и сложное, но интересное - javascript-ом схватить select и переделать его в див с галками, именно об этом этот пост.
Итак идея реализации: чтоб было не так все просто надо дать возможность переделать все стандартные селекты в продвинутые, точнее не все а только те, у которых специальный css-класс. И не просто в селекты с галаками, а если multiple, то с галками, если нет - то radio. Для этого идем по всем селектам в документе, смотрим на класс, если подходит, то создаем див с бродером как у селекта и такогоже размера, с полосами прокрутки. Внуть него надо запихать дивы с checkbox или radio со значениями и подписями к ним, взятыми из опций селекта. Чтоб была только вертикальная прокрутка запонять будем дивами, у которых overflow буджет none.
После почти всего дня мучений получился вот такой код:
function convertSelects()
{
var selects = document.getElementsByTagName('SELECT');}
for(var s=0; s<selects.length; s++){ select = selects[s]; if(select.className == 'advselect' && select.size) convertSelect(select); }
function convertSelect(obj)
{
var div = document.createElement("div");}
var id = obj.id;
div.style.backgroundColor = 'white';
div.style.color = 'black';
div.style.borderStyle = 'inset';
div.style.borderWidth = 2;
div.style.textAlign = 'left';
div.className = 'advselect';
div.style.overflow = 'auto';
div.style.width = obj.style.width;
div.style.height = obj.style.height;
var name = obj.name;
for(var i=0; i<obj.options.length; i++)
{
var opt = obj.options[i];}
if(obj.multiple) div.innerHTML += '<div style="overflow: hidden;" title="'+opt.text+'"><nobr><input type="checkbox" name="'+name+'[]" value="'+opt.value+'"'+(opt.selected?' checked':'')+'> ' + opt.text + '</nobr></div>';
else div.innerHTML += '<div style="overflow: hidden;" title="'+opt.text+'"><nobr><input type="radio" name="'+name+'" value="'+opt.value+'"'+(opt.selected?' checked':'')+'> ' + opt.text + '</nobr></div>';
obj.parentNode.insertBefore(div, obj);
obj.parentNode.removeChild(obj);
div.setAttribute('id', id);
Теперь как этим пользоваться (из комментария к оригинальному файлу advselect.js).
- Автоматическое преобразование select-box к продвинутым. В боди добавляем хэндлер OnLoad следующего содержания:
<body OnLoad="conversSelects();">
Для того чтобы быть преобразованным, select box должен иметь класс advselect и у него должны присутствовать стили выстоты и ширины, а также аттрибут size больший 1, например
<select multiple name="rayon_id" id="rayon_id" style="width: 130px; height: 200px;" size=10 class=advselect> - Ручное преобразование: после каждого селекта, который должен быть преобразован добавляем вызов функции-конвертора, параметр которой - объект select-box, который должен быть преобразован. Например
<select multiple name="rayon_id" id="rayon_id" style="width: 130px; height: 200px;" size=10 class=advselect>
...
</select>
<script>convertSelect(document.getElementById('rayon_id'));</script>
В результате получам вот такие селект-боксы:
Замечания. Имена селектов передаются в создаваемый check и radio элементы, в случае checkbox имя получается вида name[] т.е. массив, который более удобен для обработки на сервере. Аттрибут id от селекта передается в id созданного дива. Для корректного преобразования селекта к продвинутому, у оригинального должны быть прописаны стили ширины и высоты.
Кустомизация. Для изменения внешнего вида можно изменить в CSS класс div.advselect (общий вид) и div.advselect div (облик элементов списка).
И на последок еще одно важное замечание. Если форма в которой живет селект-бокс некорректно расположена в документе, например
<table ...>
<form ...>
<tr>
<td>
...
то свежесозданный продвинутый сеект работать не будет, точнее он будет появляться но не будет отдавать свои значения при сабмите формы. Причина этог мне видится в том, что форма занимает некорректное положение в DOM модели документа, и добаляемый элемент в силу непонятных причин вылазит за форму и не учавствует в ее сабмите.
Кому интересно пользуйтесь, но не забывайте плз давать ссылку на мой сайт 