Как правильно использовать postMessage для междоменного обмена сообщениями с html5 и современными браузерами?Я все еще получаю ошибки - PullRequest
Новая
       48

Как правильно использовать postMessage для междоменного обмена сообщениями с html5 и современными браузерами?Я все еще получаю ошибки

4 голосов
/ 04 октября 2011

Я уверен, что здесь что-то не так, но я не могу понять, как это сделать ... Пример здесь работает нормально, без уведомлений и ошибок на консоли, так что это означает, что мойБраузер поддерживает междоменный обмен сообщениями с html5 (конечно, это Chrome 14 ..).

Мой код выполняет более или менее следующие действия: Скрипт, загруженный на WebsiteA.com, создает iframe и добавляет его в WebsiteA.документ .com.Добавляемый фрейм будет содержать WebsiteB.com, и после загрузки он должен отправить сообщение своему родителю WebsiteA.com, чтобы сообщить ему, что WebsiteB.com готов принять JSON.Когда WebsiteA.com получает это сообщение, он отправляет обратно JSON.

Таким образом, WebsiteA.com имеет строку прямо перед </body>, например: <script scr="http://WebsiteB.com/load-my-iframe.js" type="text/javascript"></script>, а внутри load-my-iframe.js у меня естьследующее: 

var child = document.createElement('iframe');
child.src = 'http://WebsiteB.com/child.html';

var body = document.getElementsByTagName('body')[0]
body.appendChild(child);

var SomeJSON = {"something" : "that WebsiteB should have"};

window.onmessage = function (e) {
    if (e.origin === 'http://WebsiteB.com' && e.data === 'ready') {
            e.source.postMessage(SomeJSON, 'http://WebsiteB.com');
    }
}

Таким образом, создается элемент iframe, добавляется его в документ WebsiteA.com и ждет, пока он скажет, что он готов (я думаю ...).На WebsiteB.com у меня есть файл child.html, который является src iframe, загруженным в документ WebsiteA.com, и этот файл имеет следующее: 

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>WebsiteB.com</title>
        <script type="text/javascript">
            window.onload = function () {
                window.parent.postMessage('ready','*');
            }

            window.addEventListener('message', receiveMessage, false);
            function receiveMessage(event) {
                if (event.data.something === "that WebsiteB should have") {
                    document.write('It worked!');
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

А теперь странные вещи:

К сожалению, я не являюсь владельцем WebsiteA.com и WebsiteB.com, но мне удалось установить, что это работает между одним доменом верхнего уровня и поддоменом (который заканчивается на .no.de).Это действительно работает, НО в консоли Google Chrome 14 я получаю классический Unsafe JavaScript attempt to access frame with URL <a href="http://WebsiteA.com/" rel="nofollow">http://WebsiteA.com/</a> from frame with URL <a href="http://WebsiteB.com/child.html" rel="nofollow">http://WebsiteB.com/child.html</a>. Domains, protocols and ports must match..Пример из html5demos прекрасно работает без этой ошибки.

Почему я получаю эту ошибку и как от нее избавиться?

Ответы [ 2 ]

1 голос
/ 05 октября 2011

Я только что попробовал ваш код, и, похоже, он работает в Chrome.Он использует jsfiddle и jsbin для передачи сообщений между родительским и дочерним окнами.

http://jsbin.com/oxesef/4/edit#preview

0 голосов
/ 05 октября 2011

Это не ответ, но может помочь вам.

Я использую http://easyxdm.net/wp/, чтобы избежать подобных проблем.

Карл

...