Отправить сообщение в iframe с главной страницы на локальном хосте

Я пытаюсь отправить сообщение между двумя файлами, которые находятся в одной папке в localhost, main.php и iframe.php, но iframe его не слушает, я пытался использовать многие целевые источники следующим образом:

главная страница.php


<body>
    <iframe src = "iframe.php" class = "iframe"></iframe>
</body>
<script>

    const iframe = document.querySelector('.iframe');
    
    iframe.contentWindow.postMessage("message sent from localhost/mainpage.php","http://localhost/iframe.php");

</script>

и внутри iframe.php, чтобы прослушать сообщение, которое я использую

window.onmessage = function(event) {

    alert(event.data);
}

Отвечает ли это на ваш вопрос? Вызов кода JavaScript в iframe с родительской страницы

disinfor 09.04.2023 23:53

disinfor Привет, ты не отвечаешь на мой вопрос. Я хочу знать, написана ли цель происхождения с ошибкой или нет. Как мне написать исходную цель, чтобы сообщение достигло iframe?

woodfile 10.04.2023 00:06

Мне не нужно отправлять функцию в iframe, я хочу отправить сообщение

woodfile 10.04.2023 00:11

Это определенно должно быть "[scheme]://[host]:[port]", так что я предполагаю, что в вашем случае "http://localhost" или "http://localhost:12345"

Pieterjan 10.04.2023 00:16

Pieterjan привет, я безуспешно пробовал оба варианта (localhost: 80 это порт моего сервера)

woodfile 10.04.2023 00:55

Возможно, вы пытаетесь отправить сообщение до загрузки iframe, до регистрации обработчика onmessage.

ray 10.04.2023 01:20

ray Привет, я пытался использовать <script> в голове безрезультатно, теперь видно, что <script> находится ниже <body>, я также использовал window.addEventListener("message",function(){}) в iframe, чтобы прослушать сообщение без успеха. Как отправить сообщение в iframe на локальном хосте с помощью postMessage? Спасибо

woodfile 10.04.2023 01:44

Просто чтобы убедиться, что это проблема, оберните вызов postMessage в setTimeout, чтобы задержать его на несколько секунд.

ray 10.04.2023 02:43

ray Спасибо, вы ответили на мой вопрос, чтобы использовать setTimeout в postMessage, и это сработало, поместите этот комментарий в качестве ответа, чтобы подтвердить его и чтобы другие могли его видеть

woodfile 10.04.2023 03:57

@woodfile Опубликовал ответ с одним из многих возможных способов избежать этой проблемы.

ray 10.04.2023 19:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
10
88
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как обсуждалось в комментариях, вы вызываете postMessage до того, как ваш контент iframe загрузится. Существует множество способов решить эту проблему, один из которых заключается в прослушивании события «загрузки» в iframe перед попыткой его выполнить.

Будет выглядеть примерно так:

const iframe = document.querySelector('iframe');

iframe.addEventListener('load', () => {
  console.info('iframe loaded')
  
  // iframe has loaded; can post messages now.
  iframe.contentWindow.postMessage("message sent from localhost/mainpage.php","http://localhost/iframe.php");
});
<iframe src = "//example.com"></iframe>

Другие вопросы по теме