postMessage событие к конкретному обработчику событий

На чтение 3 мин Опубликовано 31.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Заключение

Вопрос или проблема

У меня есть одно приложение (назовем его A), которое включает приложение B.

Я хотел бы отправить данные из B (дочернего) в A (родительское).

Я могу использовать этот код:

window.parent.postMessage(formElement.children[0].properties['inputObject'][0].value, '*');

А затем в родительском приложении:

window.addEventListener("message", onMessage, false);

Моя проблема в том, что у родителя есть несколько обработчиков событий.

Я не хочу редактировать их все, чтобы фильтровать события (исключить события postMessage от B).

Есть ли решение, чтобы прикрепить обработчик события сообщения только к iframe?

Ответ или решение

Для эффективного взаимодействия между приложением А (родительское) и приложением B (дочернее), важно обратить внимание на использование механизма postMessage в контексте запросов между различными окнами или iframe. Это особенно актуально, когда в родительском окне имеется множество слушателей событий, что может усложнить фильтрацию получаемых сообщений.

Проблема

Как вы уже указали, ваше приложение A принимает сообщения из приложения B с помощью следующего кода:

window.parent.postMessage(formElement.children[0].properties['inputObject'][0].value, '*');

В родительском окне вы используете следующий код для установки слушателя сообщения:

window.addEventListener("message", onMessage, false);

Вашей проблемой является необходимость изоляции событий от конкретного iframe (в данном случае приложения B), не изменяя поведение других слушателей в родительском окне.

Решение

К счастью, вы можете использовать свойство origin в объекте события message, чтобы фильтровать сообщения на стороне родительского окна. Это позволит вам реагировать только на сообщения от определенного источника (например, приложения B). Приведу более подробно:

Выборочная обработка сообщений: В обработчике событий window вы можете проверить свойство origin события message:

function onMessage(event) {
    // Убедитесь, что сообщение пришло с ожидаемого источника
    if (event.origin === "https://example.com") { // Замените на фактический домен приложения B
        // Обработка данных из приложения B
        console.log("Получено сообщение:", event.data);
    } else {
        console.warn("Сообщение проигнорировано: неверный источник", event.origin);
    }
}

window.addEventListener("message", onMessage, false);

Использование уникальных идентификаторов: Если вы хотите дополнительно изолировать обработку сообщений, вы можете внедрить некий уникальный идентификатор или тип сообщения в данные, которые отправляются из приложения B. К примеру:

const messageData = {
    type: "fromAppB",
    value: formElement.children[0].properties['inputObject'][0].value
};
window.parent.postMessage(messageData, '*');

В родительском коде:

function onMessage(event) {
    if (event.origin === "https://example.com" && event.data.type === "fromAppB") {
        console.log("Получено сообщение от App B:", event.data.value);
    }
}

window.addEventListener("message", onMessage, false);

Заключение

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

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