Question

我有一个页面在加载Iframe时有动画。页面上有一个表单供用户提交网址，表单的目标是iframe。

加载动画在第一次加载页面时有效。但是提交表单时，动画不起作用。我不确定我做错了什么，但这是我的代码，如果有人可以提供帮助，请提前感谢。

<head>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div id="form_container">
        <form id="tt1"  method="post" target="iframe1" action="convert.php">
            <input id="element_1" name="url1"  type="text"  value="http://"/> 
            <input id="saveForm" type="submit" name="submit" value="submit" />


       </form>  

<div id="frameWrap">
<img id="loader1" src="ajax_loader.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="image.html" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>

Answer 1

当您提交表单时，页面“控件”会转移到新URL（在您的情况下）转换为convert.php。如果上传需要时间，那么该页面似乎无所事事。你想要的是在那里使用form.onSubmit和$（'＃loader1'）。show（），返回true。

// in ready()
$('#tt1').submit(function(){$('#loader1').show();return true;});

iframe动画不会触发表单提交

1 个答案: