javascript - 如何延迟隐藏/显示事件直到 Iframe 在提交后加载

Question

我有一个脚本，在用户提交表单后显示 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;}

Answer 1

检测到您的 iFrame 已加载:

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

});

在您提交的表单上:

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

});