我尝试在 iFrame 上存储的 img 标签上定义实时事件。例如，当我单击 iFrame 上的图像时，我想获得一个简单的 javascript 警告框。
你知道我如何为 iFrame 定义事件吗，因为我想写一个类似 $('img').live("click",function().... 的东西，但仅限于 iFrame 上的元素。
请注意：页面加载后，我的 iFrame 上会动态添加 img 标签。
感谢您的帮助。
尼古拉斯
【问题讨论】：
标签： javascript jquery iframe events
你可以做到的
$('#iframeId').contents().find('img') // ...
【讨论】：
这里的其他解决方案在很大程度上是短视的，因为您尝试做的事情在底层 javascript 中相当复杂。
我建议也使用 jquery 上下文 - 我强烈建议等待 iframe 完全加载，否则之前的建议都无法正常工作...
$("#frame").ready(function () { //wait for the frame to load
$('img', frames['frame'].document).bind("click",function(){
alert('I clicked this img!');
});
});
这通常应该有效，除非您更新 iframe 或刷新它，在这种情况下，所有事件绑定都将失败......更糟糕的是，iframe 似乎不支持 .live 事件 - 至少不适合我.
【讨论】：
$("iframe").contents().find("img")
这将定位 iFrame 中的图像。但请注意，如果 iFrame 不违反浏览器（或 jquery）的跨站策略，jquery 只会遍历 iFrame。
这意味着如果 iframe 是 google.com，则无法触摸内部 DOM。
【讨论】：
jQuery.bind() 不适用于外部文档。至少在 jQuery 1.6.2 中。
但是您可以绑定到 DOM 事件：
$("iframe").contents().find("img").onclick = function() { // do your staff here };
如果您目前没有完整的图像列表，您可以使用事件传播：
$("iframe").contents().find("body").onclick = function() { // do your staff here };
它将与自定义事件一起工作：
$("iframe").contents().find("body").onmyevent = function() { // do your staff here };
还有一件事要记住...帧内容是异步加载的。因此，在加载 iframe 内容后绑定您的处理程序：
var $iframe = $("iframe");
$iframe.bind("load", null, funcion(e) {
$iframe.contents().find("body").onclick = function() { // do your staff here };
});
对于更复杂的情况，在 iframe 中处理您的图像点击，并触发您以后可以在正文级别处理的自定义事件。特别是如果您拥有完全动态的内容并希望绑定到 iframe 内的“实时”事件。
【讨论】：
你可以像这样触发事件内部：
parent.$('#dlg').trigger('onTitle');
然后像这样举行活动：
$('#dlg').bind('onTitle', function(){ alert(); });
【讨论】：
这对我有用。注意：确保您在 iframe 页面上也引用了 jquery 库。
$(document).ready(function(){
$('#iframeid').load(function(){ //make sure that all elements finish loading
$('#iframeid').contents().find('img').live({
click: function(){
alert('clicked img');
}
});
});
});
【讨论】：