Как управлять DOM на чистом JavaScript?
Управление DOM с помощью JavaScript в современных браузерах и IE 11+
Отправить данные из iframe в родительское окно
// Called from the iframe
window.parent.postMessage(message, '*');
Где message строка, если вы хотите отправить несколько данных, вы можете кодировать в JSON:
// Called from the iframe
const message = JSON.stringify({
message: 'Hello from iframe',
date: Date.now(),
});
window.parent.postMessage(message, '*');
Отправить данные со страницы в свой дочерний iframe
// Called from the page
frameEle.contentWindow.postMessage(message, '*');
Где frameEle представляет элемент iframe.
Получить отправленные данные
В iframe или главной странице вы можете прослушать событие message, чтобы получить отправленные данные:
window.addEventListener('message', function(e) {
// Get the sent data
const data = e.data;
// If you encode the message in JSON before sending them,
// then decode here
// const decoded = JSON.parse(data);
});
Совет
Если вы отправляете или получаете сообщение из разных фреймов, вы можете включить параметр, чтобы указать, откуда приходит сообщение.
// From a child iframe
const message = JSON.stringify({
channel: 'FROM_FRAME_A',
...
});
window.parent.postMessage(message, '*');
Затем на главной странице вы можете различить сообщения, посмотрев на параметр:
window.addEventListener('message', function(e) {
const data = JSON.parse(e.data);
// Where does the message come from
const channel = data.channel;
});
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться