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

참고 : 나는 대신 .bind()을 사용하는 것이 좋습니다 jQuery를 이전 버전을 사용하는 경우 .on()는, jQuery를 1.7로 새로운 (구문 이 경우에는 동일 함). 상위 페이지에서

Answer 2

는 추가 : Iframe에 응답 넣어

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

경우

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