Событие "load" не срабатывает, когда iframe загружается в Chrome

Я пытаюсь отобразить "маску" на моем клиенте, в то время как файл динамически сгенерирован на стороне сервера. Похоже, что рекомендуется обходиться для этого (так как его не ajax) заключается в использовании iframe и прослушивании из события onload или done, чтобы определить, когда файл фактически отправлен клиенту с сервера.

вот мой код angular:

    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);

Это отлично работает в Firefox, но не удачи в Chrome. Я также попытался использовать функцию onload:

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

Но мне там тоже не повезло.

Идеи?

Ответы

Ответ 1

К сожалению, невозможно использовать событие iframe onload в Chrome, если содержимое является вложением. Этот ответ может дать вам представление о том, как вы можете обойти это.

Ответ 2

Я ненавижу это, но я не мог найти другого способа, кроме проверки того, загружается ли он или нет, кроме как путем проверки с интервалом.

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);

Ответ 3

Вы можете сделать это по-другому:

В основном документе:

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);

В документе iframe (это внутри html страницы, на которую ссылается URL-адрес)

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

Это будет работать, если главная страница и страница внутри iframe находятся в одном домене.

На самом деле вы можете получить доступ к родительскому объекту через:

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

Безопаснее использовать window.parent, поскольку переменные parent и top могут быть перезаписаны (обычно не предназначены).

Ответ 4

вы должны рассмотреть 2 очка:

1- во-первых, если ваш URL-адрес имеет другое доменное имя, это невозможно сделать, если у вас нет доступа к другому домену, чтобы добавить заголовок Access-Control-Allow-Origin: *, чтобы исправить это, перейдите к этому ссылка.

2-, но если он имеет тот же домен или вы добавили Access-Control-Allow-Origin: * в заголовки своего домена, вы можете сделать то, что хотите:

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
    });
};

Я сделал это во всех браузерах.

Ответ 5

Я только что заметил, что Chrome не всегда запускает событие загрузки для главной страницы, так что это может повлиять на iframes, поскольку они в основном обрабатываются одинаково.

Используйте инструменты Dev или Performance api, чтобы проверить, запущено ли событие загрузки.

Я только что проверил http://ee.co.uk/, и если вы откроете консоль и введите window.performance.timing, вы найдете записи для domComplete, loadEventStart и loadEventEnd равны 0 - по крайней мере в это текущее время:)

Похоже, что здесь проблема с Chrome - я проверил его на двух ПК с использованием последней версии 31.0.1650.63.

Обновление: снова проверяется ee и запускается событие загрузки, но не при последующих перезагрузках, поэтому это прерывисто и может быть связано с ошибками загрузки на их сайте. Но событие загрузки должно срабатывать.

Эта проблема произошла на 5 или 6 сайтах для меня сейчас в последний день, так как я заметил, что мой собственный мониторинг сайта иногда не удался. Только просто определил причину этого. Мне нужен какой-то сон красоты, тогда я буду исследовать дальше, когда буду бодрствовать.