0

Есть задача передать данные со страницы в iframe.

Сейачс я передалю данные из iframe на страницу, где их и принимаю. Но есть задача передавать данные обратно.

Вот рабочая функция, для отправки данных из iframe в eventListener, находящийся на стороне страницы, откуда iframe загружается.

  callParent = function (eventName) {
    window.parent.postMessage({
      'event': eventName,
      'token': 'traffic-widget'
    }, "*");
  }

А вот, собственно, и сам eventListener

window.addEventListener('message', function (event) {...}, false);

Вся эта конструкция нормально работает, но трубется наладить дуплексную связь.

Как это сделать?

Если я устанавливаю eventListener на стороне iframe, то я начинаю получать из самого iframe, но не получаю те, которые отправляю из основной страницы.

ДОПОЛНЕНИЕ

Максимум, чего мне удалось добиться, это ошибки: SecurityError: Permission denied to access property "addEventListener" on cross-origin object.

Я так понимаю, что обойти это не так то просто, или вовсе не возможно.

Есть какие-то мнения на этот счёт?

Заранее спасибо.

2
  • iframe на том-же домене находится ?
    – EVG
    16 июл 2018 в 14:22
  • @EVG, нет, на другом. 16 июл 2018 в 14:24

1 ответ 1

2

Собственно когда-то задавался этим вопросом тоже. Остались наброски, надеюсь вам поможет. Информация отправляется в iframe и выводится в блоке с id reciveIframe , после получения отправляется ответ и записывается в блок с id test. Проверить можете здесь github page. Но данный код будет работать при условии что сайты в зоне одного домена. Дело в том что это так называемые межсайтовые скрипты, и они блокируются политикой безопасности браузеров, подробнее почитайте тут Error: Permission denied to access property “document”

Страница на которой окно iframe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<body>
<iframe id="iframe" name="target" src="https://evgeniyvorobev.github.io/testpage/iframe.html" frameborder="no" scrolling="no" width="100%" ></iframe>
<div id="reciveIframe">а это инфа которую мы получили с iframe</div>

<script>
// отправка сообщения в iframe win.
window.onload = function(){
var win = document.getElementById("iframe").contentWindow; // объект iframe
win.postMessage("Сообщение отправлено с страницы "+location.href,"https://evgeniyvorobev.github.io/testpage/iframe.html"); // отправляем сообщение в iframe ( после запятой адресс iframe )

function listener(event) { // получение сообщения из iframe
    event.origin == '' 
    document.getElementById("reciveIframe").innerHTML = event.origin + " прислал: " + event.data;
}
if (window.addEventListener){
    window.addEventListener("message", listener,false);
 } else {
    window.attachEvent("onmessage", listener);
 }     
}
</script>
</body>
</html>

Страница iframe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<body>
<div id="test"></div>
<script type="text/javascript">
            function listener(event){
                document.getElementById("test").innerHTML = event.origin + " прислал: " + event.data;
                parent.postMessage('Вернули обратно произвольный текст Lorem ipsum dolor.','https://evgeniyvorobev.github.io/testpage/index.html')
            }
            if (window.addEventListener) {
                window.addEventListener("message", listener,false);
            } else { // ie 8
                window.attachEvent("onmessage", listener);
            }
        </script>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.