den Inhalt des iFrames überprüfen und mit jquery reagieren

Question

Ich habe ein Formular, das beim Absenden ein Ladebild anhängt. Die Antwort des Formulars wird in einem iFrame angezeigt, der sich auf der Seite befindet. Ich möchte das Ladebild ausblenden, sobald der iFrame den erforderlichen Inhalt nach einer bestimmten Verzögerungszeit enthält.

Ich bin SEHR neu in jQuery, so meine Entschuldigungen für die grobe Verständnis des Codes bin ich nicht sicher, was falsch oder richtig mit dem folgenden Code ist. Jede Hilfe wird sehr geschätzt werden.

Danke

Code hier:

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

Anmerkung: .on() ist neu ab jQuery 1.7, wenn Sie eine ältere Version von jQuery verwenden, empfehle ich die Verwendung von .bind() zu verwenden (die Syntax ist in diesem Fall dieselbe).

Answer 2

Fügen Sie auf der übergeordneten Seite hinzu:

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

Wenn Ihr Iframe Antwort setzen:

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