ここで何かが間違っていると確信していますが、指を置くことはできません...ここの例は、コンソールに通知やエラーがなくても問題なく動作するため、ブラウザーが html5 によるクロスドメインメッセージングをサポートしていることを意味します (のもちろんそうです、それはChrome 14です..)。
私のコードは多かれ少なかれ次のことを行います: WebsiteA.com にロードされたスクリプトが iframe を作成し、それを WebsiteA.com のドキュメントに追加します。追加されたフレームには WebsiteB.com が含まれており、読み込まれると、その親である WebsiteA.com にメッセージを送信して、WebsiteB.com が JSON を受信する準備ができていることを通知する必要があります。WebsiteA.com がこのメッセージを受け取ると、JSON を返します。
</body>したがって、 WebsiteA.com には次のような行が直前にあり、 の<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 のドキュメントに追加され、準備ができたと通知されるのを待ちます (おそらく...)。srcWebsiteB.com には、WebsiteA.com のドキュメントに読み込まれた iframeのファイル child.html があり、そのファイルには次の内容が含まれています。
<!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 を所有していませんが、これを 1 つのトップ レベル ドメインとサブドメイン (.no.de で終わる) の間で機能させることができました。それは本当にうまくいきますが、Google Chrome 14 のコンソールではクラシックが表示されます。html5demosの例は、このエラーなしで問題なく動作します。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.
このエラーが発生する理由と、それを取り除く方法を教えてください。