jQuery .ready in a dynamically inserted iframe

后端未结

关注

 10  1986

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)

1 2 下一页