My page loads an iframe. The iframe contains a small markup, including " Click "

I have a js file, included it controls a click-event for the buton. Currently the JS file is included, in the small page, which my iframe loads.

I want to include my javascript library on the containing page level, not in the page which the iframe loads. So , I moved it. Those of you who know your stuff, will not be surprised to hear that when I did this, the click() event stopped firing.

                    $(document).ready(function(){

                          $('#filter_button').click(function(){
                                    //operations
                            });

                    });

I loosely understand, that it is because the .ready function is traversing the DOM before the iframe loads... but I don't know what to do about it. Any help?

My page loads an iframe. The iframe contains a small markup, including " Click "

I have a js file, included it controls a click-event for the buton. Currently the JS file is included, in the small page, which my iframe loads.

I want to include my javascript library on the containing page level, not in the page which the iframe loads. So , I moved it. Those of you who know your stuff, will not be surprised to hear that when I did this, the click() event stopped firing.

                    $(document).ready(function(){

                          $('#filter_button').click(function(){
                                    //operations
                            });

                    });

I loosely understand, that it is because the .ready function is traversing the DOM before the iframe loads... but I don't know what to do about it. Any help?

• javascript
• jquery
• html
• iframe

• An iframe has a different window context. It sounds like you understand the same origin policy, which is good. Unfortunately jQuery isn't designed to work across window contexts; getting a listener to fire when the iframe hits document.ready is much more involved. – zzzzBov Commented Feb 9, 2012 at 22:22

3 Answers 3

If you want to make sure that all content is loaded, images, iframes etc. (not just the DOM being ready) before you run your code, you can make use of jQuery's .load() instead of $(document).ready(function(){});:

$(window).load(function () {
  // run code
});

Try the jQuery load() method with a callback to wire up the events on your loaded page after it has finished loading.

Replacing path_to_page.html with your current iframe url:

$(document).ready(function(){
    $('#loadedContent').load('path_to_page.html', function() {
        $('#filter_button').click(function(){ 
        //operations 
        }); 
    });
});

Replace your iframe with this:

<div id="loadedContent"></div>

I did this in on my main page where iframe attr() is set:

$("#my_iframe") .attr( "src", template ) // template is the iframe content path
                .one( "load", function() {

                    $("#my_iframe")[0].contentWindow.$('body').trigger('contentReady');

                } ).each( function() {
                    if( this.plete ) //trigger load if cached in certain browsers
                        $(this).trigger("load");
                } );

and then put my code in the iframe this way:

$(window).on( "contentReady", function(e) {
    // code I usually initiate with document ready
} );

I am not a javascript expert. The attr()…on.("load"… technique I learned from someone else in relation to exchange an image. So I bined it here with my iframe script.