Как передать данные, в динамически созданный iFrame с помощью postMessage?

Question

[Yuri Kalnin]

уже все перепробовал не могу понять в чем дело...

Делаю виджет который устанавливается на сайте с помощью подключения JS скрипта.

Примерно так:

<script src="//app.localhost/widget/v1" type="application/javascript"></script>
<script type="text/javascript">

var Widget116;

document.addEventListener("DOMContentLoaded", function() {
    Widget116= new GoWidget({
        id: 116,
        openSelector: '.go-show-MnJa2hqMsFkRtBC',
        autoOpen: false,
        autoOpenDelay: 0,
        openBeforeClose: false,
    }).init()
});
</script>

в коде скрипта: //app.localhost/widget/v1 создается сам html каркас виджета, создается iframe и в атрибут src подставляется нужный url виджета, вот таким образом:

// все что тут делается это в конец body вставляется frame 
GoWidget.prototype.createWidget = function () {

    var tt = this

    var elWrapper, elModal, elWidget, elCurtain, elClose

    elWrapper = document.createElement('div'),
        elModal = document.createElement('div'),
        elWidget = document.createElement('iframe')
    elCurtain = document.createElement('div')
    elClose = document.createElement('div')

    elCurtain.className = 'b-start'
    elClose.className = 'b-icon-close'
    elWrapper.className = 'b-wrapper b-wrapper__' + tt.params.id
    elModal.className = 'b-modal'

    elWidget.setAttribute('id', 'iframe-widget-'+tt.params.id)

    if (tt.params.noStatic){
        elWidget.setAttribute('src', tt.assets.widgetUrl+'?noStatic=noStatic')
    }else{
        elWidget.setAttribute('src', tt.assets.widgetUrl)
    }

    elWrapper.appendChild(elModal)
    elModal.appendChild(elClose)
    elModal.appendChild(elCurtain)
    elModal.appendChild(elWidget)

    document.body.appendChild(elWrapper);

    return this
}

iframe встроился в страницу все ок
теперь я пытаюсь из скрипта виджета достучатся в iframe и передать ему данные, в файле //app.localhost/widget/v1
пишу:

GoWidget.prototype.setEvents = function () {

    var this_ = this

    setTimeout(function () {

        var iframe = document.getElementById('iframe-widget-'+this_.params.id);

        console.log('Call testMessage', iframe.contentWindow)
        iframe.contentWindow.postMessage("onmessage", "http://app.localhost");

    }, 3000)

    return this
}

в документе который погрузился в iframe написал так:

window.addEventListener('onmessage', function(event) {

            console.log('onmessage get');

        });

в консоли вижу:



Но надпись onmessage get нету. то есть событие в iframe не уходит, что я не так делаю?

Answer 1

[Руслан Лопатин]

А вы уверены, что iframe уже прогрузился в момент, когда туда отправляется сообщение? И что туда загрузился именно нужный документ, а, например, не ERROR 404?

Наиболее надёжный способ убедиться в том, что фрейм готов получать сообщения - это послать сообщение из фрейма родителю после того, как он зарегистрировал onmessage у себя. И только после этого отправлять сообщения из родителя в iframe. До этого момента их, например, можно накапливать в буфере.

Comments

[Yuri Kalnin]

"А вы уверены, что iframe уже прогрузился в момент, когда туда отправляется сообщение? И что туда загрузился именно нужный документ, а, например, не ERROR 404?" - да сообщение отправляется с задержкой в 3 сек, хоть 5, 10 секунд разницы нету. ничего не приходит

я пробовал из фрейма послать родителю сообщение, тоже ничего не приходит.

Answer 2

[Yuri Kalnin]

может кому пригодится, ответ нашел здесь:

https://vexell.ru/%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%D...