2016-10-18 28 views
0

これは無実の問題だと思っていますが、実際にまだ答えはわかりません。イベントバブリングがIFrameで発生しない

イベントのバブリングは、イベントを意図したターゲットに誘導します。このように動作します。ボタンがクリックされ、イベントがボタンに向けられます。そのオブジェクトに対してイベントハンドラが設定されている場合、イベントがトリガされます。そのオブジェクトにイベントハンドラが設定されていない場合、そのイベントはオブジェクトの親に対してバブルアップします(水中のバブルのような)。

HTML部分

<div> 
    <iframe> 
    <a>Clickable fdf Area</a> 
    </iframe> 
</div> 

javascriptの一部

$('div iframe').load(function(){ 
    var iframeBody = $(this).contents().find("body"); 
    iframeBody.html("<a href='www.google.com'>clickable area</a>"); 
    iframeBody.on("click", "a", function(){ 
    alert(22222); 
    }); 
document.getElementsByTagName("div")[0].addEventListener("click", function(event){ 
     alert(11111); 
}, true); 

}); 
$('iframe').attr("src","JavaScript:'iframe content'"); 

私の質問は明らかです。 iframe 'a'タグをクリックしようとすると、警告(11111)が表示されないのはなぜですか? なぜイベントバブリングが開催されていないのですか?コードを読んでいるイベントにアクセスする方法は何ですか?

Fiddle link

+0

これは、同一生成元ポリシーの結果であることは承知しても、それはメッセージパッシングでない限り、あなたは別のドメインからのコードと通信することはできません。 –

+0

私の質問ははっきりしています。なぜ私はアラート(11111)を取得していないiframe 'a'タグをクリックしようとすると? –

答えて

3

泡立ちが唯一の単一のドキュメントツリーを発生するspeccedされて参照します。 iframe個別のドキュメントツリーであるため、ツリーをバブル処理するイベントはiframeドキュメントのルートで終了し、境界を越えてホストドキュメントに移動しません。

キャプチャドキュメント、一般的に、ツリーの最上位で動作し、下向き

Document Object Model Events: 1.2.2. Event capture

この上向きの伝播はまで継続し、ドキュメントを含めます。

Document Object Model Events: 1.2.3. Event bubbling

関連する問題