Пример междоменного взаимодействия postMessage - PullRequest
0 голосов
/ 27 мая 2020

Я пытаюсь установить связь с веб-сайта, отображаемого в iframe, на родительскую страницу, содержащую iframe, с postMessage. Обе страницы должны быть из разных доменов. Я создал быстрый пример, используя jsfiddle и codepen (адаптированный из этого jsfiddle: http://jsfiddle.net/bmknight/A7YfK/), но сообщения, похоже, не приходят. Я предполагаю, что я неправильно выбираю родителя, когда пытаюсь вызвать postMessage - может ли кто-нибудь дать мне подсказку?

Вот мой код: https://codepen.io/Megahra/pen/yLYWzab Screenshot of page with iframe

Код на дочернем веб-сайте :

    //Get the users message from the message input box
    var message = document.getElementById("message").value;

    //Check that the message is not blank
    if (message !== "") {
    parent.postMessage(message, '*');
    }
    else {
         alert("You cannot send a blank message!");   
    }
}

Код на на родительском веб-сайте :

function receiver(message) {
    console.log(message); // This never appears in the console, even when a message is added to innerHtml
    //get the message container html element (in this case, the messages div)
    var messagecontainer = document.getElementById('messages');
    var trusteddomain = 'http://fiddle.jshell.net';

    //Get the time of message receipt
    var currenttime = new Date();
    //format the time into a user readable format
    var formattedtime = currenttime.getHours() + ':' + currenttime.getMinutes() + ':' + currenttime.getSeconds();

    //inspect the origin property of the message event to ensure the message originates from the same domain)
    if (message.origin == 'http://fiddle.jshell.net') {
        if (message.data[0] != 'embed') {
            var msgcontent = message.data;
            messagecontainer.innerHTML += 'message received @ ' + formattedtime + ': ' + msgcontent + '<br />';
        }
    }
}

//Add an event listener to the window object to catch any message events
window.addEventListener('message', receiver, false);
...