Question

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

我想延迟隐藏/显示事件，直到加载Iframe。我能够通过加载动画执行此操作，但我不确定如何使用隐藏/显示脚本执行此操作。

该脚本使用提交函数，如下所示：

$(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，然后显示div但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
});

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

2 个答案: