18 Января 2011 17:16

Кроссдоменная авторизация

Про работу JavaScript PHP

Суть новомодной тенденции, которая сейчас набирает обороты такова: вы заходите на сайт и авторизуетесь на нем, потом переходите на другой из тойже сети, но на другом домене, и там вы автоматически являетесь авторизованными. Примером такой схемы сейчас успешно служат Яндекс, Мейл.ру и другие.

А вот что касается реализации, то тут есть масса мнений и способов, достаточно спросить гугля по фразе "кроссдоменная авторизация" и почитать длинные дискуссии. Для себя я вижу 2 варианта реализации этой моды: одно простое и красивое, но с ограничениями, другое более сложное и не такое изящное, но более свободное.

О спецификации Cross-Origin Resource Sharing речь пока не идет, поскольку она еще нигде не поддерживается.

Начнем с простого и красивого решения.

Читать дальше...

03 Декабря 2009 16:54

Вызов JavaScript функции из Flash для чайников :)

JavaScript Flash

Происходит это все от задач: надо сделать рекламный банер на флеше с кнопкой закрыть.

Реализация: Делаем флеш-ролик, помещаем в DIV, при нажатии на закрыть прячем DIV (если существует более простой или правильный способ рад буду узнать). Прятать DIV будем естественно жаваскриптом, для этого нужно чтоб наш ролик вызывал javascript-овую функцию в документе.

Для этого во флеше создаем кнопку закрыть, идем в ActionScript и там пишем:

on(release)
{
  
import flash.external.ExternalInterface;
ExternalInterface.call("myFunction");  

}

Благодаря этому при нажатии кнопки будет вызываться функция myFunction из документа :)

Читать дальше...

06 Апреля 2009 17:14

Ошибка "операция прервана" в 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>

И вот пример как нужно правильно:  

Читать дальше...

03 Апреля 2009 23:45

Новый антиспам

Про работу JavaScript

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

О том что и как работает позже, главное что теперь не нужно вводить ненавистный защитный код с картинки, все делает ява-скрипт без участия человека.

Эффективность нового антиспама будет тестироваться на этом посте (надеюсь что на него накинутся роботы) и еще надеюсь что они не зафлудят мне весь блог ввиду возможных косяков в антиспаме.

В общем ждем, велкам писать каменты...

Читать дальше...

27 Февраля 2008 17:55

Продвинутый SELECT

Про работу JavaScript

Встала проблема: надо на странице сделать 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).

  1. Автоматическое преобразование 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>
  2. Ручное преобразование: после каждого селекта, который должен быть преобразован добавляем вызов функции-конвертора, параметр которой - объект 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 модели документа, и добаляемый элемент в силу непонятных причин вылазит за форму и не учавствует в ее сабмите.

Кому интересно пользуйтесь, но не забывайте плз давать ссылку на мой сайт

Фильтр