Iframe Onload funktioniert nicht, wenn URL PDF-Ausgabe erzeugt

Ich habe eine URL, die PDF-Datei generiert. Um PDF zu generieren, verwende ich iframe, um diese URL zu laden und PDF-Dateien für Benutzer auf derselben Seite zu generieren.Iframe Onload funktioniert nicht, wenn URL PDF-Ausgabe erzeugt

Wenn Benutzer auf die Schaltfläche klicken, wird loader im Bildschirm angezeigt. und es sollte ausblenden, wenn Iframe laden abgeschlossen (wenn PDF-Download-Popup). Ich benutze unten Code, aber es funktioniert nicht, loader bleiben Show nach dem Download Popup offen (wenn ich URL mit anderen wie google.com ändern, dann wird es funktionieren).

Hier ist mein Code-Snippet.

$("#test").click(function(){ 
 
    iframe = document.getElementById("download-container1"); 
 
    if (iframe === null) 
 
    { 
 
    $("#ajax_loading").show(); 
 
    var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile"; 
 
    iframe = document.createElement('iframe'); 
 
    iframe.id = "download-container1"; 
 
    document.body.appendChild(iframe); 
 

 
    $('#download-container1').load(function() { 
 
     $("#ajax_loading").hide(); 
 
    }); 
 
    iframe.src=url; 
 
    } 
 
    
 
});

.ajax_loading { 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    display: none; 
 
    height: 100%; 
 
    left: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 99999; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="ajax_loading" id="ajax_loading"><span>Please Wait... Loading</span></div> 
 
    <button id="test">click</button> 
 
    </body> 
 
</html>

Wenn iframe komplette Last, div ajax_loading zu verstecken brauchen. Mache ich hier etwas falsch? Gibt es eine andere Lösung?

Vielen Dank im Voraus.

Quelle

2015-09-14 himanshu archirayan

Sie könnten die readystate iframe-Eigenschaft verwenden, um zu überprüfen, ob iframe vollständig geladen ist. In Chrome funktioniert dies jedoch nicht, wenn der Inhalt eine Binärdatei ist.

Sobald die Iframe-URL wird es die iframe Readystate-Eigenschaft überprüft jede Sekunde:

$("#test").click(function(){ 
iframe = document.getElementById("download-container1"); 
if (iframe === null) 
{ 
    $("#ajax_loading").show(); 
    var url="http://test.coachfxlive.com/ajax/ajax-action.php?type=s&vid=0&playlist_id=11&perpage=1&action=get_profile"; 
    iframe = document.createElement('iframe'); 
    iframe.id = "download-container1"; 
    document.body.appendChild(iframe); 

    //$('#download-container1').load(function() { 
    //  $("#ajax_loading").hide(); 
    //}); 
    iframe.src=url; 
    checkFinishedDownload(iframe); 
} 

}); 

function checkFinishedDownload(ifr) { 
    if (ifr.readyState == "complete" || ifr.readyState == "interactive") { 
     // Here hide the spinner 
     $("#ajax_loading").hide(); 
    } 
    else { 
     setTimeout(function() { 
      checkFinishedDownload(ifr); 
     }, 1000); 
    } 
} 
}

Überprüfen Sie meine Frage: Iframe.readyState does not work in chrome

EDIT: In Firefox können Sie die onload Ereignis verwenden:

function checkFinishedDownload(ifr) { 
    if ($.browser.mozilla) { 
     ifr.onload = function() { 
      $("#ajax_loading").hide(); 
      } 

    }else{ 
      iframeCheck(ifr); 
    } 
} 

function iframeCheck(iframe){ 
     if (iframe.readyState == "complete" || iframe.readyState == "interactive") { 
     // Here hide the spinner 
     $("#ajax_loading").hide(); 
    } 
    else { 
     setTimeout(function() { 
      checkFinishedDownload(iframe); 
     }, 1000); 
    } 
}

Quelle

2015-09-16 13:20:24 anmarti

Ich habe das gleiche in Firefox versucht, aber nicht für mich gearbeitet. –

bitte, überprüfen Sie meine bearbeitete Antwort. In Firefox hast du das Onload-Event. Sie müssen es über das iframe dom-Element anhängen. – anmarti

Gibt es eine Lösung für Safari und Chrom? –

Iframe Onload funktioniert nicht, wenn URL PDF-Ausgabe erzeugt

Antwort

Verwandte Themen