使用jQuery在iFrame元素上定义一个事件
我尝试在iFrame上的img标签商店中定义一个直播事件。 例如，当我单击iFrame上的图像时，我想获得一个简单的javascript警告框。
你知道我怎么能为iFrame定义事件，因为我想放一些像$('img').live("click",function() ….但只适用于iFrame上的元素。
请注意：页面加载后，我的iFrame会动态添加img标签。
谢谢你的帮助。
萨科
你可以这样做
- 确保iframe中的页面有自己的jQuery副本[编辑： 仅对框架页面本身内部的jQuery操作非常必要 ]
- 从外部文档，像这样工作到iframe文档：
$('#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或刷新它，在这种情况下，所有事件绑定将失败…更糟糕的是.live事件似乎在iframe中不受支持 – 至少对我来说不支持。
$("iframe").contents().find("img")
这将定位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中的’live’事件。
你可以像这样发射事件：
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'); } }); }); });