How to reference classes in an iframe

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.

Check here: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — H Hatfield, Aug 05 '11 at 22:41
thanks for the link, I looked at that link but it still didn't answer the question. — Chapsterj, Aug 06 '11 at 18:22

score 0 · Answer 1 · edited May 23 '17 at 09:58

For anyone who is looking for the answer. This does not work for cross domain files.

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

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


        });

    });

Thanks to HackedByChinese who posted it on this thread. How to find a div inside of an iframe

AlienWebguy · Accepted Answer · 2011-08-06T22:15:39.053

0

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/

edited Aug 06 '11 at 22:15

answered Aug 05 '11 at 23:48

AlienWebguy

76,997
17
122
145

So you don't even have to wait for it to load you can just use contents and it will reference the iframes elements right away. – Chapsterj Aug 06 '11 at 05:51
AlienWebguy when I tried your example by adding the Iframe when a user clicks a button and then using your contents method to be able to reference the dom of the iframe it would not work. It would only work when the iframe was created at the load time of the page it was been added to. – Chapsterj Aug 06 '11 at 18:18
See updated code and fiddle - you just have to wait for the iFrame to finish loading before you can manipulate it's DOM, just like your local DOM. – AlienWebguy Aug 06 '11 at 22:15

How to reference classes in an iframe

2 Answers2