隐藏/显示加载功能不起作用

Question

我有一个脚本，在用户提交表单后显示 2 个 div 并隐藏 1 个 div。表单的目标是同一页面上的 Iframe。

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

该脚本与提交函数的工作方式如下：

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

但是如果我尝试像这样使用加载功能，它不起作用，但它适用于我的加载动画，有什么建议可以说明我做错了什么吗？

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

这是有效的加载动画脚本

    $(document).ready(function () {
    $('#iframe1').on('load', function () {
    $('#loader1').hide();
        });
    });
    / in ready()
    $('#form_710370').submit(function(){$('#loader1').show();return true;});

这里是 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>

<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>  
    <iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
    </div>

这里是 CSS

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

Answer 1

我认为您遇到的问题是您阻止表单提交到iframe，然后显示divs，但iframe 再也不会调用load，因为正在停止提交。

假设您想在提交表单时显示#mydivhide1 和#mydivhide2，然后在iframe 完成加载时隐藏它们，我想出了一个可以满足您需求的小提琴：http://jsfiddle.net/CST4t/3/

基本上我只是删除了e.preventDefault( );，而不是返回false，而是返回true，所以表单提交通过了。我还清理了一些项目，例如action 属性，并将submit 函数覆盖移动到$(document).ready( );。

编辑

我做的另一件事是将form target 和iframe 的名称更改为更常用的名称，似乎在更多浏览器中效果更好。显然，从浏览器到浏览器，名称和目标值真的很敏感，see this answer。

Answer 2

$('#iframe1').contents().load(function() {
    //window loaded
});