如何将隐藏/显示事件延迟到提交后Iframe加载

How to delay Hide/Show events until Iframe loads after a submit

本文关键字：提交 迟到 Iframe 加载 延迟 事件 隐藏 显示      更新时间：2023-11-12

我有一个脚本，在用户提交表单后显示2个div并隐藏1个div。表单的目标是同一页面上的Iframe。Iframe需要一段时间才能加载。

我想将隐藏/显示事件延迟到Iframe加载。我可以通过加载动画来做到这一点，但我不知道如何使用隐藏/显示脚本来做到这。

这是隐藏/显示脚本

$(function () {
    $('#form_710370').submit(function (e) {
        e.preventDefault(); // add this
        $('#form_container').hide()
        $('#mydivhide1, #mydivhide2').show();
        return false;
    });
});

这是HTML

<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
    <form id="form_710370"  target="iframe" method="post" convert.php">
        <input id="Website" name="url1" type="text" value=""/> 
        <input id="saveForm" type="submit" name="submit" value="submit" />
    </form> 
</div>

这是相关的CSS

#mydivhide1 {display:none;}
#mydivhide2 {display:none;}

检测您的iFrame已加载：

$('#YourIframe').load(function(){
});

在您提交的表格上：

$("#form_710370").on('ajax:complete',function(){
});

将隐藏和显示代码放入iframeload（）函数中。

$('#frame').load(function(){
   $('#form_container').hide();
   $('#mydivhide1, #mydivhide2').show();
});

试试这个

timeout = setTimeout(function () {
   $('#form_container').hide();
}, 6000);

// delay
setTimeout(function () {
    // after delay 
    $('#form_container').animate({
        'height': '0px'
    }, '400', 'swing', function () {
        // finish animate fadeIn
        $('#mydivhide1, #mydivhide2').fadeIn('400');
    });
}, '700');

希望是帮助

相关文章：