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

Я уверен, что здесь что-то не так, но не могу точно сказать, что именно... Пример здесь ведет себя просто прекрасно без каких-либо уведомлений или ошибок на консоли, так что это означает, что мой браузер поддерживает междоменные сообщения с 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 ' s документ и ждет его, чтобы сказать, что он готов (я думаю...). На WebsiteB.com, у меня есть файл ребенка.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 http://WebsiteA.com/ from frame with URL http://WebsiteB.com/child.html. Domains, protocols and ports must match.. Пример из html5demos прекрасно работает и без этой ошибки.

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

2 4
javascript html html5 cross-domain postmessage

2 ответа:

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

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

1

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

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

Карл

0