5

数行の JavaScript を使用して iframe 要素を作成し、次のようなメッセージを送信したいと思います。

function loadiframe (callback) {
    var body = document.getElementsByTagName('body')[0];
    var iframe = document.createElement('iframe');
    iframe.id = 'iframe';
    iframe.seamless = 'seamless';
    iframe.src = 'http://localhost:3000/iframe.html';
    body.appendChild(iframe);
    callback();
}

loadiframe(function() {
    cpframe = document.getElementById('iframe').contentWindow;
    cpframe.postMessage('please get this message','http://localhost:3000');
    console.log('posted');
})

そして、http://localhost:3000/iframe.html (iframe のソース) 内は次のようになります。

<!DOCTYPE html>
<html>
<head>
<title>does not work</title>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  if (event.origin == "http://localhost:3000") {
    document.write(JSON.stringify(event));
    document.write(typeof event);
  }
}
</script>
</head>
<body>
</body>
</html>

しかし、何も起こりません...オリジンの安全チェックを使用しないようにしましたが、それでも何も起こりません...メッセージが届かないように...

私はある種の非同期の問題を抱えていますか? postMessage が消える前に iframe がロードされていることを確認しようとしました...

EDIT1：また、コンソールにエラーは表示されません...

EDIT2：Google Chrome 11とFirefox 4で試しました

前もって感謝します。

4

3 に答える 3

5

次の 2 つの問題が考えられます。

  1. callback子フレームがロードされる前に呼び出しています-loadイベントで試すか、setTimeout
  2. postMessage「*」を起源とするもの以外で作業することはできませんでした。そこに URL を入力すると、「セキュリティ エラー: http://xxx/のコンテンツは http ://yyy/からデータをロードできない可能性があります」というセキュリティ警告が表示されますが、エラー コンソール (Ctrl + Shift + J) のみを除きます。他の場所ではありません。それが機能するためにどこかにセットアップする必要がある他のものがいくつかあると思いますが、私はまだ何を理解していません.

これは、私のドメインからドキュメントをロードするコードのわずかに変更されたバージョンのjsfiddleで、Firefox と Chrome で動作します。

于 2011-05-17T14:15:41.060 に答える
0

私はこれが非常に遅いことを知っていますが、将来のために...

Iframe からメッセージを投稿する場合、オリジンは iframe のドメインではなく、親 (ターゲットのオリジン) です。

例: 親のドメインはhttp://parent.local、iframe はhttp://iframe.local

IFrame から親に投稿し、有効な親のみに投稿するには:

window.parent.postMessage({foo: 12}, 'http://parent.local') // note the domain. we want to talk to only that domain / target origin

親は、MessageEvent の origin プロパティをチェックすることで、リクエストが有効な iframe からのものであることを確認できます。

window.addEventListener('message', (event) => {
 console.log(event.origin) // will be http://iframe.local
})
于 2021-11-25T08:23:19.107 に答える