Как добавить класс к блоку по клику на кнопку, которая загружена в iframe?
Всем привет!
Нужно помощь плохо разбирающемуся в скриптах. Надеюсь, получится объяснить понятно. Пытаюсь встроить вот эту штуку в корзину сайта https://docs.ozon.ru/logistics/delivery/widget/ Клиент выбирает пункт выдачи заказа и нажимает на кнопку "Забрать здесь". В этот момент генерируется такой код: {"id":19068791345000,"type":"Пункт выдачи","address":"Россия, г. Москва, ш. Сколковское, д. 32","fittingClothesAvailable":true,"fittingShoesAv ailable":false} Из которого мой скрипт берёт адрес пункта и вставляет его в поле с id=edit-panes-webform-nid3005-0--ozon - с этим мой скрипт справляется отлично (строка $('#edit-panes-webform-nid3005-0--ozon').val([person.address, person.id]);) Одновременно с этим я хочу, чтобы в блок <div id="div_ozon" class="div_ozone"> добавился класс close_ozon (строка $('#div_ozon').toggleClass('close_ozon');) - и вот этот код почему-то не срабатывает. Подскажите, пожалуйста, что нужно исправить? Сначала я думал, что это из-за того, что загрузка виджета идёт в iframe, но ведь первая часть моего кода срабатывает отлично. Вот весь код. <div id="div_ozon" class="div_ozone"> <div class="close"></div> <iframe title="Ozon widget" style="width: 100%; height: 100%; min-height: 450px; min-width: 320px; border: none; overflow: hidden" src="https://rocket.ozon.ru/lk/widget?token=.......%3D%3D&hidepostamat=true">Браузер не поддерживает iframe</iframe> </div>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
// Важно не слушать чужие события
if (event.origin !== "https://rocket.ozon.ru")
return;
console.log(event.data);
var person = JSON.parse(event.data);
$('#edit-panes-webform-nid3005-0--ozon').val([person.address, person.id]);
$('#div_ozon').toggleClass('close_ozon');
};
</script>
|
toggleClass это jquery, а в "весь код" я не вижу его подключение
а если без jquery, попробуйте на чистом js document.querySelector('#div_ozon').classList.add( 'close_ozon')
<body>
<div id="div_ozon" class="div_ozone">
<div class="close"></div>
<iframe title="Ozon widget" style="width: 100%; height: 100%; min-height: 450px; min-width: 320px; border: none; overflow: hidden" src="https://rocket.ozon.ru/lk/widget?token=.......%3D%3D&hidepostamat=true">Браузер не поддерживает iframe</iframe>
</div>
</body>
<script>
setTimeout(()=> {document.querySelector('#div_ozon').classList.add('close_ozon')}, 2000)
</script>
в по поводу кнопки в фреме, то это зависит тот же домен и протокол у фрема, если да, то пробуйте нажимать через iframe.contentWindow.document иначе работать доступ закрыт |
Цитата:
Я просто думал, что раз при нажатии кнопки у меня заполняется поле "#edit-panes-webform-nid3005-0--ozon", то и класс при нажатии тоже сможет подставиться. А можно тогда как-то сделать, чтобы если заполнилось поле "#edit-panes-webform-nid3005-0--ozon", то добавляем в #div_ozon класс close_ozon? |
Если верить документации, то при разных источниках доступ закрыт. У меня тоже не получилось.
Проблема в том что в представленом вами коде нет ни кнопки ни поля "#edit-panes-webform-nid3005-0--ozon". Можно только догадываться. Кнопка и поле находится в фреме и там обрабатывается данное событие, а так как #div_ozon находится вне фрема, а это значит что разные источники, значит никак |
Вот у меня и появилась идея. Моё поле же заполняется при нажатии кнопки. Можно как то к этому событию прикрутить добавление класса? Мол если поле заполнилось, значит добавить класс.
У меня поле вот такое заполняется: <input type="text" maxlength="128" name="panes[webform_nid3005][0][_ozon]" id="edit-panes-webform-nid3005-0--ozon" size="60" value="" readonly="readonly" class="form-text"> Оно на моём сайте. Кнопка загружается в ifame, вот пример https://docs.ozon.ru/logistics/delivery/widget/ |
Вроде получилось что-то похожее на нужное.
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
// Важно не слушать чужие события
if (event.origin !== "https://rocket.ozon.ru")
return;
console.log(event.data);
var person = JSON.parse(event.data);
$('#edit-panes-webform-nid3005-0--ozon').val([person.address, person.id]);
if (person.type == "Пункт выдачи")
document.querySelector('#div_ozon').classList.add('close_ozon');
};
</script>
Теперь и поле заполняется и класс вставляется (класс, кстати, закрывает окошко, в котором открывалась карта). |
| Часовой пояс GMT +3, время: 05:20. |