0

ページに iframe があり、親またはフレーム内からトリガーできるイベントがあるとしますが、どちらかがトリガーされたときに実行するには、両方のページにリスナーが必要です。これを達成するための最良の方法は何ですか？

両方のページが同じドメインにあるため、同じオリジンのセキュリティ ポリシーの問題について心配する必要はないと思います。

私は jQuery を使用していますが、必要に応じて裸の JavaScript を使用できます。

これまでに試したことを、簡単な例にまとめました。

親:

HTML:

<input type="button" value="Click me"/>
<iframe src='child.html'/></iframe>

JS:

$(function() {
  var $iframe = $('iframe');
  $(document).on('custom_event', function() {
    alert('hello from parent!');
    $($iframe[0].contentWindow.document).trigger('custom_event');
  });
  $('input').on('click', function() {
    $(document).trigger('custom_event');
  });
});

子供の場合:

HTML:

<input type="button" value="Click me too"/>

JS:

$(function() {
  $('input').on('click', function() {
    $(document).trigger('custom_event');
  });
  $(document).on('custom_event', function() {
    alert('hello from child!');
    $(window.parent.document).trigger('custom_event');
  });
});

いずれかのボタンをクリックすると、他のウィンドウで「custom_event」もトリガーされると思います。つまり、親で $iframe.contentWindow.document を介してフレーム内でイベントをトリガーできるようになり、同様にフレームで window.parent.document を介してイベントをトリガーできるようになりますが、残念ながら違います! エラー、警告、その他の手がかりはありません。

私は何か間違ったことをしているのですか、明らかな何かを見逃していますか、それとも単に不可能ですか?

助けてくれてありがとう。

4

1 に答える 1

1

私は最近同じシナリオを持っていました。重要なのは、アプリ コンテナ div などのイベントをディスパッチするために、子または親のいずれかによって参照できる高レベルの DOM 要素を見つけることです。

私は複数の iframe を持っていたので、「targetFrame」ID を渡して、すべてのフレームがイベントをキャッチした場合に正しいものだけが実行されるようにしました (MVC の疎結合のベスト プラクティス)。好きなパラメータを動的に追加することもできます。

コンテナにイベントを発生させる子 iFrame のサンプル コード:

var evt = document.createEvent('Event');
evt.initEvent('myEvent', true, true);
evt.targetFrame = "Frame1";
element = parent.document.getElementById('containerDiv'); // $('#containerDiv') for parent
element.dispatchEvent(evt);

イベントをリッスンする子 iframe のコード:

parent.document.addEventListener('myEvent', function( evt) {
    if(evt.targetFrame == "Frame1") {
        // won't execute your code here in other frames.
    }
});

アプリでどの「parent.document」参照が機能するかを理解する必要があります。

それが役立つことを願っています。

于 2013-07-10T01:06:30.387 に答える