проверьте содержимое iFrame и ответьте с помощью jquery

Question

У меня есть форма, к которой при отправке добавляется изображение загрузчика.Ответ формы отображается на iFrame, который находится на странице.Я надеюсь, что изображение загрузчика исчезнет после того, как в iframe появится необходимый контент, после определенного периода задержки.

Я ОЧЕНЬ новичок в jQuery, поэтому я извиняюсь за грубое понимание кодане уверен, что не так или правильно с приведенным ниже кодом.Любая помощь будет высоко ценится.

Спасибо

Код здесь:

$(function() {

    $(".submitButton").click(function() {

         $('#mainDiv').append('<img src="images/ajax-loader.gif" class="loaderIcon" id="loaderIcon" alt="Loading..." />');

     });

     if($('#iFrameName').contents().val()!==""){    

         delay(3000);
         $('#mainDiv img.loaderIcon').fadeOut(1000);
     }
});

Answer 1

//bind an event handler to the `load` event for the iframe
$('#iFrameID').on('load', function () {

    //get the contents of the `body` element in the iframe
    var response = $(this).contents().find('body').html();

    //here you can do what you want with the response variable, for instance you can check for the existance of a specific element
    if (response.filter('#successID').length > 0) {

        //if there is an element in the iframe with the id of `successID` then the loaderIcon will be removed
        $('#loaderIcon').remove();
    }
});

Примечание: .on() является новым с jQuery 1.7, если вы используете более старую версию jQuery, тогда я предлагаю использовать .bind() (синтаксис в этом случае тот же).

Answer 2

На родительской странице добавьте:

function hideLoader() {
    $('#loaderIcon').remove();
}

Если в ответе IFrame указано:

<script type='text/javascript'>
parent.hideLoader()
</script>