jQuery - iframeから動的に作成された要素のイベントバインド

Question

iFrame内の各アンカーにonClickイベントハンドラをバインドしたいとします。 iframeをIM /チャットクライアントとみなし、iframeの読み込み時にアンカーリンクが存在しないと考えてください。私はiFrameソースを制御できないため、アンカーには属性を設定することはできません。

このトピックについてのご意見は数回ありましたが、iFrameを使用した例は見つからず、十分な読書をしても成功しませんでした。

私は.on()を使用しなければならないと思います。 （私はエラーを取得していない

// wait for frame to load 
$('#chatFrame').on('load', function(){ 

    $('#chatFrame').on('click', 'a', function(e){ 
     e.preventDefaults(e); 
     alert("link clicked!"); 
    }); 
}); 

が、アラートはクリックで解雇されていないと、リンクは新しいウィンドウに私を取る：

HTML：：

<iframe src="https://...." scrolling="no" id="chatFrame"></iframe> 

JS相続人は私が持っているもの期待されるデフォルト動作として）。

これらのiFrameアンカーにバインドする方法についてアドバイスできますか？

Answer 1

contents()を使用してiframeの内部に入る必要があります。そのウィンドウ内の要素にアクセス物事これはまた、IFRAMEがページと同じドメイン上にあることを前提としていたり​​、されません

$('#chatFrame').on('load', function(){ 
    $(this).contents().find('body').on('click', 'a', function(e){ 
     e.preventDefault(e); 
     alert("link clicked!"); 
    }); 
}); 

を試してみてください$('iframe a')

のようではありませんので、IFRAMEは、それ自身のウィンドウを持っていますそれにアクセスすることができます