wake-up-neo.net

Das Ereignis "load" wird nicht ausgelöst, wenn iframe in Chrome geladen wird

Ich versuche, eine "Maske" auf meinem Client anzuzeigen, während eine Datei serverseitig dynamisch generiert wird. Es scheint, dass die empfohlene Umgehung dafür (da es kein Ajax ist) besteht, einen iframe zu verwenden und vom onload- oder done -Ereignis zu überwachen, um festzustellen, wann die Datei tatsächlich vom Server an den Client gesendet wurde.

hier ist mein Winkelcode:

    var url = // url to my api
    var e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");
    e.load(function() {
        $scope.$apply(function() {
            $scope.exporting = false;  // this will remove the mask/spinner
        });
    });
    angular.element('body').append(e);

Dies funktioniert großartig in Firefox, aber kein Glück in Chrome. Ich habe auch versucht, die Onload-Funktion zu verwenden:

e.onload = function()  { //unmask here }

Aber ich hatte dort auch kein Glück.

Ideen?

27

Leider ist es nicht möglich, das Ereignis onload eines iframe in Chrome zu verwenden, wenn der Inhalt eine Anlage ist. Diese Antwort kann Ihnen eine Vorstellung davon geben, wie Sie damit umgehen können.

19
rtcherry

Ich hasse das, aber ich konnte keinen anderen Weg finden, als zu prüfen, ob es noch geladen wird oder nicht, außer durch Abfragen in Intervallen.

var timer = setInterval(function () {
    iframe = document.getElementById('iframedownload');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    // Check if loading is complete
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
        loadingOff();
        clearInterval(timer);
        return;
    }
}, 4000);
10
Negarrak

Sie können es auch anders machen:

Im Hauptdokument:

function iframeLoaded() {
     $scope.$apply(function() {
            $scope.exporting = false;  // this will remove the mask/spinner
        });
}

var url = // url to my api
var e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");
angular.element('body').append(e);

Im iframe-Dokument (Dies ist innerhalb des HTML-Codes der durch URL referenzierten Seite)

    window.onload = function() {
        parent.iframeLoaded();
    }

Dies funktioniert, wenn sich die Hauptseite und die Seite im Iframe in derselben Domäne befinden.

Tatsächlich können Sie auf das übergeordnete Element zugreifen:

window.parent
parent
//and, if the parent is the top-level document, and not inside another frame
top          
window.top

Die Verwendung von window.parent ist sicherer, da die Variablen parent und top überschrieben werden könnten (normalerweise nicht beabsichtigt). 

4
Carlos Robles

sie müssen 2 Punkte berücksichtigen:

1- Erstens: Wenn Ihre URL einen anderen Domainnamen hat, ist dies nur möglich, wenn Sie Zugriff auf die andere Domain haben, um den Access-Control-Allow-Origin: * -Header hinzuzufügen. Um dies zu beheben, gehen Sie zu diesem link .

2- Wenn es jedoch dieselbe Domain hat oder Sie Access-Control-Allow-Origin: * zu den Headern Ihrer Domain hinzugefügt haben, können Sie wie folgt vorgehen:

var url = // url to my api
var e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");
angular.element(document.body).append(e);
e[0].contentWindow.onload = function() {
    $scope.$apply(function() {
        $scope.exporting = false;  // this will remove the mask/spinner
    });
};

Ich habe das in allen möglichen Browsern gemacht.

0
Mehran Hatami

Ich habe gerade bemerkt, dass Chrome das Ladeereignis für die Hauptseite nicht immer auslöst. Dies kann sich auch auf iframes auswirken, da diese grundsätzlich gleich behandelt werden.

Verwenden Sie Dev Tools oder das Performance-API, um zu prüfen, ob das Ladeereignis überhaupt ausgelöst wird.

Ich habe gerade http://ee.co.uk/ überprüft und wenn Sie die Konsole öffnen und window.performance.timing eingeben, werden die Einträge für domComplete, loadEventStart und loadEventEnd auf 0 gesetzt - zumindest bei diesem Strom Zeit:)

Anscheinend gibt es hier ein Problem mit Chrome - ich habe es auf zwei PCs mit der neuesten Version 31.0.1650.63 überprüft.

Update: ee erneut geprüft und das Ladeereignis wurde ausgelöst, jedoch nicht bei nachfolgenden Nachladungen. Dies ist zeitweilig und kann auf Ladefehler auf ihrer Website zurückzuführen sein. Aber das Ladungsereignis sollte was auch immer auslösen.

Dieses Problem ist jetzt am letzten Tag an 5 oder 6 Standorten für mich aufgetreten, seit ich bemerkte, dass meine eigene Standortüberwachung gelegentlich fehlgeschlagen ist. Nur genau die Ursache dafür herausgefunden. Ich brauche etwas Schönheitsschlaf, dann werde ich weiter nachforschen, wenn ich wacher bin.

0
Geezer68