Как правильно разработать виджет с ресайзом для стороннего сайта?
Добрый день!
Появилась необходимость написать небольшой виджет для сайтов партнеров.
Я это реализовал, попутно столкнувшись в некоторыми проблемами. Хотел бы услышать, правильно ли я сделал и можно ли сделать лучше/проще.
Виджет этот - это кнопка, которая болтается в углу сайта, наподобие онлайн чатов. При нажатии на кнопку, на ее месте появляется блок с информацией.
Сводиться все должно к вставке кода на сайт партнера.
Тут два варианта размещения: 1) Генерировать разметку на сайте партнера 2) Вставлять iframe кодом
Второй вариант выглядит удобнее, т.к. нет никаких конфликтов стилей, скриптов и тп.
Но есть минус - нужно изменять размеры этого виджета, то есть размеры iframe'а.
Для этого я использую postMessage, то есть партнер вставляет себе на сайт js код. Этот код вставляет к нему на сайт iframe, задает iframe'у размеры и размещает его на нужном месте.
Изначально в iframe отображается только кнопка 40х40px, соответственно у iframe такие же размеры.
Теперь, когда пользователь нажимает на кнопку, я отправляю из iframe postMessage, принимаю его на сайте партнера и меняю размеры iframe до нужных (300х500px) и тут же отправляю обратно в iframe postMessage, что iframe увеличен и готов к показу информации. Принимаю этот postMessage внутри iframe и вместо кнопки вывожу блок.
Сам код внутри iframe имет 100% ширину и 100% высоту, то есть растягивается под размеры iframe.
Такой обмен postMessage'ми я сделал, потому что если показать блок с информацией до того, как iframe увеличился в размерах, то все это дергается на доли секунд и получается некрасиво.
В целом все работает. Меня немного смущает такой "велосипед" и тот момент, что если у пользователя плохое интернет соединение или еще что-то, то эти postMessage могут идти с зажержкой, то есть пользователь будет на кнопку нажимать, а открываться блок будет не мнгновенно.
Попробуйте следующее.
1. При клике начинается css transition для расширения ифрейма.
2. Внутри еще один ифрейм, в него начинает подгружаться ваша страница, прозрачность установлена в 0.
3. В момент окончания загрузки запускайте translateX или translateY по желанию и поднимайте прозрачность до 1 анимация easy-out, одновременно скрывайте прозрачность кнопки.
