18

iframeを囲むdivでクリックイベントまたはマウスダウンイベントをキャプチャするにはどうすればよいですか。divのクリックイベントに関数をアタッチしようとしましたが、iframeがイベントを周囲のdivにバブルすることはないため、関数が呼び出されることはありません。divでイベントをキャプチャし、それをデフォルトのアクションのためにiframeに伝播する方法はありますか？

4

3 に答える 3

11

クリックがiframe領域にある場合、iframeコンテキストはクリックイベントを処理し、iframeの親にバブルアップしません。そのため、iframe領域でクリックイベントが発生した場合、divはクリックイベントをまったく登録しません。

さらに、iframeにiframeの親と同じドメインに属していないページが含まれている場合、相互作用は禁止されます（同一生成元ポリシー）。

同一生成元ポリシーが満たされている場合、実行できることがいくつかあります。iframeの親コンテキストでメソッドを呼び出すことができます。

top.parentFunction();

そのため、iframeに、iframeの親（top参照でアクセス可能）に委任するイベントリスナーを追加します。

イベントの伝播ははるかに複雑なので、DiegoPeriniのNWEventsライブラリを参照します。彼のイベントシステムは、世の中で最も優れたものの1つであり、iframeの相互作用に特にこだわっていると思います。

私は確かにこれを達成するために独自のコードを書き始めることはありません。適切に実行したい場合、これは簡単に1年のプロジェクトになる可能性があり、それでもディエゴの作業より劣ります。

于 2010-09-11T11:58:48.863 に答える
6

これを行う「良い」方法はありませんが、Iframeのクリックを本当に検出する必要がある場合は、最新のブラウザーでそれを行うことができます。

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe>

<script type="text/javascript">
var inIframe = false;
function checkClick() {
    if (document.activeElement 
      && document.activeElement === document.getElementById("iframe")) {
        if (inIframe == false) {
            alert("iframe click");
            inIframe = true;
        }
    } else
        inIframe = false;
}
setInterval(checkClick, 200);
</script>

このスクリプトは、ユーザーがIframeにいるかどうかを200ミリ秒ごとにチェックします。もちろん、彼らはそこにたどり着くためにIframeをクリックしていないかもしれませんが、これが@BGerrissenのソリューションなしでできる最善の方法だと思います。

もう一度クリックしない限り、最初の「クリック」のみが検出されます。それは本当に現代のブラウザでのみ動作します。

于 2010-09-11T12:31:49.143 に答える
0

舷窓のようなライブラリを使用して、ドメイン間でも親とiframeの間でメッセージを渡すことができます。これを使用しても、イベントは正確に伝播されません（イベントオブジェクトを取得できません）が、単純なメッセージの形式で独自のイベントを作成し、親でクリックとして処理することができます。

これが彼らの例です

ただし、現在のニーズに合わせてより簡単に機能するため、Brendonの回答を使用しました。

于 2015-02-23T04:15:04.060 に答える