Здравствуйте! Помогите, пожалуйста, мучаюсь уже третий день.
Понадобилось сделать виджет, который будет устанавливаться на сайты клиентов. Виджет - айфрейм, который загружает страницу с формой. По умолчанию вместо формы показывается кнопка, при нажатии на которую открывается форма. В общем работать это должно, как какой-нибудь онлайн чат (Jivo и тп).
Я решил сделать следующим образом:
1) Клиентам, которые захотят у себя форму установить мы отправляем js-код, который добавляет айфреймна страницу клиента и загружает в айфрейм нашу страницу с формой.
2) Наша страница с формой имеет два состояния: открыт/закрыт. Но размеры у кнопки и открытой формы разные, поэтому айфрейм на странице клиента должен менять размер. Для этого при нажатии на кнопку летит postMessage в родительское окно (на сайт клиента), которое меняет размер фрейма.
Вот примерный код, который устанавливает себе клиент:
<style>
/*Iframe отображает кнопку, поэтому размер маленький*/
.widget {width:100px; height: 100px; position: fixed; bottom:40px;right: 40px; border:1px solid red;}
/*Iframe отображает открытую форму, поэтому его размер увеличен под нее*/
.widget.open {width: 300px; height: 500px;}
</style>
<script>
window.addEventListener('message', e => {
//Просто меняем размер iframe
document.querySelector('.widget').classList.toggle('open');
});
</script>
<iframe class="widget" src="widget.html"></iframe>
А вот код самой страницы widget.html:
<style>
/*.button - кнопка формы*/
.button {width: 80px; height: 80px; background: blue; position: fixed; bottom: 10px; right: 10px;}
/*.form - открытая форма*/
.form {width: 300px; height: 500px; background: yellow; position: fixed; bottom: 0; right: 0; display: none;}
.form.open {display: block}
</style>
<script>
document.querySelector('.button').onclick = e => {
//Отправляем postMessage на изменения окна iframe
parent.postMessage(...);
//Показываем/скрываем форму
document.querySelector('.form').classList.toggle('open');
};
</script>
<div class="button"></div>
<div class="form"></div>
Вот такой код работает как задумано и все хорошо на локальном ПК. Но когда я это выложил на хостинг и разнес по разным доменам, появился неприятный эффект.
При изменении размера фрейма содержимое его немного дергается. Если присмотреться, то иногда видно, что позиция кнопки внутри на долю секунды перемещается вверх. Как будто айфрейм увеличился, а кнопка внутри "неуспевает" оставаться приклеенной к правому нижнему углу и сначала перемещается наверх вслед за айфреймом, а затем возвращается на нужное место.
Примечательно, что при разработке, когда оба файла на локальной машине, такой проблемы нет. Это странно, ведь postMessage передается между окнами браузера и не должно быть разницы где находится сайт.
Помогите, пожалуйста, решить проблему.
