最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - document.ready and iframes - Stack Overflow

programmeradmin3浏览0评论

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?

Share Improve this question asked Feb 9, 2012 at 22:11 GRYGRY 7243 gold badges14 silver badges35 bronze badges 1
  • 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
Add a ment  | 

3 Answers 3

Reset to default 4

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.

发布评论

评论列表(0)

  1. 暂无评论