jQuery - Trigger event from within iFrame on parent document

Question

Is there any reason why this is not working:

Parent document

$(document).ready(function($) {
        $('.upload-media').click(function(){
            if( $(this).parent().find('iframe')[0] )
                return false;
            $(this).parent().append('<iframe class="media-iframe" src="'+this.href+'"></iframe>');
            var ifr = $(this).parent().find('iframe');
            $(document).bind('closeFrame', function(){ alert("event"); });
            return false;   
        }); 
    });

iFrame

$(document).ready(function() {
    $("#media-frame-close").click(function(){
        window.parent.$(window.parent.document).trigger('closeFrame');
        return false;
    });
});

Seems pretty straight forward, I've tried parent. instead of window.parent and that isn't working either :(

is the iframe loading? can you post the full source of the iframe? — Oliver
– Oliver, Commented Feb 18, 2011 at 22:28

Nalum · Accepted Answer · 2011-02-18 22:47:01Z

I've not been able to find a way to access the jQuery trigger for the document, though if you do the following you can achieve the same thing.

$(document).ready(function(){
    $('.frame').click(function(){
        if( $(this).parent().find('iframe')[0] )
        {
            return false;
        }

        $(this).parent().append('<iframe class="media-iframe" src="'+this.href+'"></iframe>');

        var ifr = $(this).parent().find('iframe');

        // Adding function directly to the document rather than using jQuery.bind/trigger
        document.closeFrame = function(){ alert("event"); };

        return false;
    });
});

$(document).ready(function(){
    $("#media-frame-close").click(function(){
        window.parent.document.closeFrame();
        return false;
    });
});

Of course this pollutes the Document Object but it will do what you want.

McDowell · Accepted Answer · 2011-12-14 10:47:41Z

1

top.document works well from an iframe (presuming iframe has jQuery too)

$('#ID', top.document).someFunction();

edited Dec 14, 2011 at 10:47

McDowell

109k31 gold badges207 silver badges272 bronze badges

answered Dec 14, 2011 at 10:29

devolved

985 bronze badges

Collectives™ on Stack Overflow

jQuery - Trigger event from within iFrame on parent document

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related