admin管理员组

文章数量:1399172

I'm sure something is wrong here but I can't quite put a finger on it... The example here behaves just fine with no notices or errors on the console, so it means my browser supports cross domain messaging with html5 (of course it does, it's Chrome 14..).

My code does more or less the following: A script loaded in WebsiteA created an iframe and appends it to WebsiteA's document. The frame appended will contain WebsiteB and when it's loaded, it must send a message to it's parent, WebsiteA, to tell it that WebsiteB is ready to receive some JSON. When WebsiteA get's this message, it sends back the JSON.

So WebsiteA has a line just before </body> just like this: <script scr=".js" type="text/javascript"></script>, and inside the load-my-iframe.js, I have the following:

var child = document.createElement('iframe');
child.src = '.html';

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

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

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

So that creates the iframe element, appends it to WebsiteA's document and waits for it to say it's ready (I guess...). On WebsiteB, I have the file child.html that is src of the iframe loaded in WebsiteA's document, and that file has the following:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>WebsiteB</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>

And now the weird stuff:

Sadly I do not own WebsiteA and WebsiteB, but I managed to have this working between one top level domain and a subdomain (that ends with .no.de). It really does work, BUT in Google Chrome 14's console I get the classic Unsafe JavaScript attempt to access frame with URL / from frame with URL .html. Domains, protocols and ports must match.. The example from html5demos works just fine without this error.

Why do I get this error and how do I get rid of it ?

I'm sure something is wrong here but I can't quite put a finger on it... The example here behaves just fine with no notices or errors on the console, so it means my browser supports cross domain messaging with html5 (of course it does, it's Chrome 14..).

My code does more or less the following: A script loaded in WebsiteA. created an iframe and appends it to WebsiteA.'s document. The frame appended will contain WebsiteB. and when it's loaded, it must send a message to it's parent, WebsiteA., to tell it that WebsiteB. is ready to receive some JSON. When WebsiteA. get's this message, it sends back the JSON.

So WebsiteA. has a line just before </body> just like this: <script scr="http://WebsiteB./load-my-iframe.js" type="text/javascript"></script>, and inside the load-my-iframe.js, I have the following:

var child = document.createElement('iframe');
child.src = 'http://WebsiteB./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.' && e.data === 'ready') {
            e.source.postMessage(SomeJSON, 'http://WebsiteB.');
    }
}

So that creates the iframe element, appends it to WebsiteA.'s document and waits for it to say it's ready (I guess...). On WebsiteB., I have the file child.html that is src of the iframe loaded in WebsiteA.'s document, and that file has the following:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <title>WebsiteB.</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>

And now the weird stuff:

Sadly I do not own WebsiteA. and WebsiteB., but I managed to have this working between one top level domain and a subdomain (that ends with .no.de). It really does work, BUT in Google Chrome 14's console I get the classic Unsafe JavaScript attempt to access frame with URL http://WebsiteA./ from frame with URL http://WebsiteB./child.html. Domains, protocols and ports must match.. The example from html5demos works just fine without this error.

Why do I get this error and how do I get rid of it ?

  • javascript
  • html
  • cross-domain
  • postmessage
Share Improve this question asked Oct 4, 2011 at 18:48 João Pinto JerónimoJoão Pinto Jerónimo 9,88420 gold badges64 silver badges87 bronze badges 1
  • Are you sure it is not working? I saw this and I got a warning, but it worked, I believe. – Alan H. Commented Jan 4, 2013 at 1:44
Add a ment  | 

2 Answers 2

Reset to default 1

I've just tried your code and this seems to work in Chrome. It uses jsfiddle and jsbin to pass messages between parent and child windows.

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

This is not the answer but could help you.

I use http://easyxdm/wp/ to avoid that kind of problems.

Carl

本文标签：

版权声明：本文标题：javascript - How to properly use postMessage to do cross-domain messaging with html5 and modern browsers ? I still get errors - 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744212368a2595480.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。