jQuery .ready in a dynamically inserted iframe

后端 未结 10 2004
闹比i
闹比i 2020-11-22 07:11

We are using jQuery thickbox to dynamically display an iframe when someone clicks on a picture. In this iframe, we are using galleria a javascript library to display multip

相关标签:
10条回答
  • 2020-11-22 07:31

    Basically what others have already posted but IMHO a bit cleaner:

    $('<iframe/>', {
        src: 'https://example.com/',
        load: function() {
            alert("loaded")
        }
    }).appendTo('body');
    
    0 讨论(0)
  • 2020-11-22 07:31

    I'm loading the PDF with jQuery ajax into browser cache. Then I create embedded element with data already in browser cache. I guess it will work with iframe too.

    
    var url = "http://example.com/my.pdf";
    // show spinner
    $.mobile.showPageLoadingMsg('b', note, false);
    $.ajax({
        url: url,
        cache: true,
        mimeType: 'application/pdf',
        success: function () {
            // display cached data
            $(scroller).append('<embed type="application/pdf" src="' + url + '" />');
            // hide spinner
            $.mobile.hidePageLoadingMsg();
        }
    });
    

    You have to set your http headers correctly as well.

    
    HttpContext.Response.Expires = 1;
    HttpContext.Response.Cache.SetNoServerCaching();
    HttpContext.Response.Cache.SetAllowResponseInBrowserHistory(false);
    HttpContext.Response.CacheControl = "Private";
    
    0 讨论(0)
  • 2020-11-22 07:34

    Found the solution to the problem.

    When you click on a thickbox link that open a iframe, it insert an iframe with an id of TB_iframeContent.

    Instead of relying on the $(document).ready event in the iframe code, I just have to bind to the load event of the iframe in the parent document:

    $('#TB_iframeContent', top.document).load(ApplyGalleria);
    

    This code is in the iframe but binds to an event of a control in the parent document. It works in FireFox and IE.

    0 讨论(0)
  • 2020-11-22 07:35

    In IFrames I usually solve this problem by putting a small script to the very end of the block:

    <body>
    The content of your IFrame
    <script type="text/javascript">
    //<![CDATA[
       fireOnReadyEvent();
       parent.IFrameLoaded();
    //]]>
    </script>
    </body>
    

    This work most of the time for me. Sometimes the simplest and most naive solution is the most appropriate.

    0 讨论(0)
  • 2020-11-22 07:38

    Try this,

    <iframe id="testframe" src="about:blank" onload="if (testframe.location.href != 'about:blank') testframe_loaded()"></iframe>
    

    All you need to do then is create the JavaScript function testframe_loaded().

    0 讨论(0)
  • 2020-11-22 07:41

    Following DrJokepu's and David Murdoch idea I implemented a more complete version. It requires jQuery on both the parent and iframe and the iframe to be in your control.

    iframe code:

    var iframe = window.frameElement;
    
    if (iframe){
        iframe.contentDocument = document;//normalization: some browsers don't set the contentDocument, only the contentWindow
    
        var parent = window.parent;
        $(parent.document).ready(function(){//wait for parent to make sure it has jQuery ready
            var parent$ = parent.jQuery;
    
            parent$(iframe).trigger("iframeloading");
    
            $(function(){
                parent$(iframe).trigger("iframeready");
            });
    
            $(window).load(function(){//kind of unnecessary, but here for completion
                parent$(iframe).trigger("iframeloaded");
            });
    
            $(window).unload(function(e){//not possible to prevent default
                parent$(iframe).trigger("iframeunloaded");
            });
    
            $(window).on("beforeunload",function(){
                parent$(iframe).trigger("iframebeforeunload");
            });
        });
    }
    

    parent test code:

    $(function(){
        $("iframe").on("iframeloading iframeready iframeloaded iframebeforeunload iframeunloaded", function(e){
            console.log(e.type);
        });
    });
    
    0 讨论(0)
提交回复
热议问题