如何检查iframe是否已完全加载PDF文件

时间:2014-10-03 21:45:05

标签: javascript jquery internet-explorer iframe cross-browser

如果在iframe加载PDF文件时如何显示加载指示符?

在我的部分工作解决方案中,我执行以下操作:当打开iframe所在的模态对话框时,会出现加载指示符。如果iframe的内容已完全加载,则指示符将消失,并显示PDF文件。

这是我的代码:

<div data-gid="<?php echo $gid; ?>" class="modal fade" id="sammelPDF" tabindex="-1" role="dialog" aria-labelledby="sammelPDF" aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Wettkampfplan gesamt</h4>
            </div>
            <div class="planGesamtModalBody modal-body">
                <div class="rwk-progress" style="display: table; margin: 0 auto;">
                    <div style="text-align: center;">
                        <img src="/planung/images/spinner.gif" />
                    </div>
                    <p style="margin-top: 10px; text-align: center;">Bitte haben Sie etwas Geduld...</p>
                </div>
                <iframe width="100%" height="100%" frameborder="0" allowtransparency="true" id="planGesamtPDFFrame" src=""></iframe>
            </div>
        </div>
    </div>
</div>

$('.sammelPDFWettkampfplan').click(function() {
    $('.planGesamtPDFFrame').hide();
    $('.rwk-progress').show();
});

$('#sammelPDF').on('show.bs.modal', function() {
    var group = getActiveTab();

    var url = '/pdf?gid=' + $(this).data('gid') + '&classes=1,2,3,4&group=' + group.attr('id') + '&nocache=' + new Date().getTime();
    $('#planGesamtPDFFrame').attr('src', url);

});

$('#planGesamtPDFFrame').load(function() {
    $('.rwk-progress').hide();
    $(this).show();
});

此解决方案适用于Safari,FF,Chrome和Opera,但不适用于IE。 我怎样才能实现加载指示器隐藏并且PDF显示在IE中?

在Google中,我发现了一些有关onreadystatechangereadyState的有趣帖子,但这也无效。

1 个答案:

答案 0 :(得分:3)

var iframe = document.createElement("iframe");
iframe.src = "simpleinner.htm";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/