Как проверить, не загружается ли iframe? JQuery?

Question

У меня есть этот код JQuery прямо сейчас, и он работает нормально. Что он делает, когда пользователь нажимает кнопку отправки, он скрывает форму, показывает загрузчик, затем передает данные по ссылке и загружает вывод в iframe.

$(document).ready(function() {

$("#xxx_form").validate({
    submitHandler: function() {
        $('#input_form').hide('slow');
        $('#loader').show('slow');
        form.submit();
    }
});

$("#xxx_frame").load(function (){
    $('#loader').hide('slow');
    $('#history').show('slow');
    $('#xxx_frame').show('slow');
});

});

Это работает нормально. Что мне нужно, это как проверить, если iframe загружен нормально или нет. Во время моего тестирования они бывали в таймауте iframe или сообщали об ошибке, что он не может подключиться к серверу. Из-за сбоя провайдера. Теперь мне нужно проверить ошибки такого рода, как я могу это сделать?

Answer 1

Насколько я вижу, нет способа проверить наличие ошибки в iframe.Существует событие .error(), но согласно комментарию в документации:

Использование .error () для iframe, похоже, никогда не срабатывает (даже если .load ()сработает при успешной загрузке iframe).

возможно, вам нужно самостоятельно реализовать какое-то время ожидания, используя событие .load(): если событие загрузки (означающее успех) не сработаетпять секунд, допустим ошибка.

Answer 2

Поздно до вечеринки, но мне удалось ее взломать: она не определяет, правильно ли загружен iFrame, но будет определять, был ли сервер доступен. Для вашего использования вы можете изменить логику и что-нибудь скрыть, когда загрузка сервера прошла успешно.

Сначала я подумал сделать AJAX-вызов, чтобы проверить, существует ли веб-сайт a) и b) разрешены ли вызовы из разных источников, за исключением того, что он изначально не работал для меня, поскольку я использовал jQuery. Это прекрасно работает, если вы делаете XMLHttpRequest:

var url = http://url_to_test.com/
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status != 200) {
        console.log("iframe failed to load");
    }
};
xhttp.open("GET", url, true);
xhttp.send();

Edit:
Таким образом, этот метод работает нормально, за исключением того, что он имеет много ложных негативов (собирает много вещей, которые будут отображаться в iframe) из-за малярии перекрестного происхождения. Я смог обойти это, выполнив запрос CURL / Web на сервере, а затем проверил заголовки ответов: а) существует ли веб-сайт и б) установлен ли заголовок x-frame-options.

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

Моя реализация в node.js:

app.get('/iframetest',function(req,res){ //Call using /iframetest?url=url - needs to be stripped of http:// or https://
   var url = req.query.url; 
    var request = require('https').request({host: url}, function(response){ //This does an https request - require('http') if you want to do a http request
        var headers = response.headers;
        if (typeof headers["x-frame-options"] != 'undefined') {
            res.send(false); //Headers don't allow iframe
        } else {
            res.send(true); //Headers don't disallow iframe
        }
    });
    request.on('error',function(e){
       res.send(false); //website unavailable
    });
    request.end();
});

Answer 3

Try ...

HTML:

<iframe id="box" ...

Jquery:

$('#box').bind('error', function () {
   alert("loaded error");
}

Редактировать: существует больше привязки команды загрузить или ошибка