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>

检查iFrame的内容并使用jquery进行响应

2 个答案: