0

空になるiframeをホストする親ウィンドウがある状況をテストする必要があります。親リソースとクロスドメイン リソースの間のプロキシとして iframe を使用する必要があります。親から子 iframe にメッセージを投稿しようとする単純なjsfiddleを作成しました。

親の JavaScript でやろうとしているのは、子 iframe のハンドラーを用意することですが、私の人生では、それを正しく機能させるための構文を理解できません。最新の Javascript の開発と設計で見た例から、addEvent ヘルパーを使用してイベントを適切に追加しようとしました (IE および他のすべてのユーザー向け)。

addEvent: function(obj, type, fn) {
    if (obj && obj.addEventListener) {
        obj.addEventListener(type, fn, false);
    } else if (obj && obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}

現在、onmessage のハンドラーをセットアップしようとしている方法は次のとおりです。

document.getElementById("frame1").onmessage = function(e) {
    alert(e.data);
};

また、要素の contentWindow にアクセスする必要があるのではないかと考えましたが、onmessage は存在しないようです。

ウィンドウのように表示され、処理できる onmessage を持つように iframe にアクセスするプロパティまたは方法はありますか?

アップデート

onmessage の値が関数に設定されていることを確認でき、値を alert(...) アウトして、それが実際に意図した関数であることを確認できますが、postMessage が子 iframe で呼び出されたときに呼び出されたことはわかりません。

4

1 に答える 1

1

の実装postMessageが正しくありません。イベントは、フレームの windowにonmessageバインドする必要があります。フレームのコンテンツは別のソースからのものであるため、これはフレーム側でのみ実行できます。Same origin policyにより、ページからこのイベントをバインドすることはできません。

このコードは、Same origin ポリシーが適用されていない場合に機能します。

// Bind event to the frame's  window  object
var frame1_window = document.getElementById("frame1").contentWindow;
frame1_window.onmessage = function(e) {
    alert(e.data);
};
frame1_window.postMessage("Hello from same domain", "http://yourdomainhere.com");

例 (ドメイン: jsfiddle.net): http://jsfiddle.net/zTctZ/3/show/
例 (ドメイン: fiddle.jshell.net): http://jsfiddle.net/zTctZ/4/

于 2012-04-26T17:58:54.873 に答える