Question

I have the below code. I’m trying to set a click event on the inner content of the iframe.

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

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

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

        });

    });

selectLocation is a class on a div element inside my iframe html. The above doesn’t seem to work or at least the click event is not getting called. The console is tracing out the iframe selector.

Answer 1

This will only work on an iframe which has the same domain as the parent. Use contents() which you can then traverse just like any other object.

Example HTML:

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

Example JQuery:

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

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

UPDATE: A question was asked in the comments about using this practice on an iFrame that was created on the fly. To accommodate for JQuery-created iFrame, you need to ensure the iFrame’s DOM has been loaded completely before you can apply any CSS manipulation.

$('#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/