Question

我有以下代码。我正在尝试在iframe的内部内容上设置click事件。

$(function(){
$("#popupIframe").load(function(){

            var selection = $(this).find(".selectLocation").click(function(evt){
                evt.preventDefault();
                console.log("clicked");
            });

            console.log("this = ", $(this));

        });

    });

selectLocation是iframe html中div元素的一个类。上面似乎没有用，或者至少没有调用click事件。控制台正在追踪iframe选择器。

Answer 1

对于正在寻找答案的人。这不适用于跨域文件。

$(function(){
$("#popupIframe").load(function(){

        var $iframe = $(this.contentDocument||this.contentWindow.document);
    $iframe.find(".selectLocation").click(function(evt){
                evt.preventDefault();
                console.log("clicked");
            });


        });

    });

感谢HackedByChinese在这个帖子上发布了它。 How to find a div inside of an iframe

Answer 2

这仅适用于与父级域名相同的iframe。使用contents()，然后可以像任何其他对象一样遍历。

示例HTML：

<iframe id="fiddleframe" src="jsfiddle.net" width="400" height="400" />

示例JQuery：

$('#fiddleframe').contents().find('.pageHeader').css('border','3px solid red');

http://jsfiddle.net/AlienWebguy/Rbe2u/

更新：评论中提出了一个问题，即在即时创建的iFrame上使用此做法。为了适应JQuery创建的iFrame，您需要确保在应用任何CSS操作之前已完全加载iFrame的DOM。

$('#create').click(function(){
    $('<iframe/>')
        .attr({
            id:"fiddleframe",
            src:"jsfiddle.net",
            width:"400",
            height:"400"})
        .appendTo('body')
        .load(function(){
            $(this)
                .contents()
                .find('.pageHeader')
                .css('border','3px solid red');
    });
});

http://jsfiddle.net/AlienWebguy/Rbe2u/1/

如何引用iframe中的类

2 个答案: