Question

我尝试在iFrame上的img标签商店定义一个直播活动。例如，当我单击iFrame上的图像时，我想获得一个简单的javascript警告框。

你知道我如何定义iFrame的事件，因为我想提出像$('img').live("click",function()这样的东西....但仅限于iFrame上的元素。

请注意： img标记会在页面加载后动态添加到我的iFrame上。

感谢您的帮助。

尼古拉斯

Answer 1

如果你

，你可以这样做

确保iframe中的页面有自己的jQuery副本[编辑：仅对框架页面本身内部的jQuery操作非常必要]
从外部文档中，按照以下方式处理iframe文档：

$('#iframeId').contents().find('img') // ...

Answer 2

这里的其他解决方案很大程度上是短视的，因为你想要做的事情在底层的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中似乎不受支持 - 至少对我来说不支持

Answer 3

 $("iframe").contents().find("img")

这将定位iFrame中的图像。但请注意，如果jquery不违反浏览器（或jquery）的跨站点策略，它将仅遍历iFrame。

这意味着如果iframe是google.com，则无法触及内部DOM。

Answer 4

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中的“实时”事件。

Answer 5

这对我有用。注意：确保您在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');
                 }
            });
        });
    });

Answer 6

你可以像这样点燃事件：

parent.$('#dlg').trigger('onTitle');

然后举行这样的活动：

$('#dlg').bind('onTitle', function(){ alert(); });

使用jQuery在iFrame元素上定义一个事件

6 个答案: