2

更新：

我被误导了，我犯了一些错误，以为我不能同时拥有一个正在运行的脚本来更新屏幕和一个未完成的提交，它会在完成后重新加载页面。

你可以做到这一点，我做到了。我这样做的方式是将我的更新程序放在 startTimeout 上并让提交继续。

    $('#JQF').on('submit', function(){
      start();
      return true;
    });
...
start: 
  function (xhr, s) {
    $(".appMainMsg").hide();
    bar = document.getElementById("ProgressBar");
    if (bar)
    {
      eta = document.getElementById("ProgressBarEta");
      startTime = new Date();
      infoUpdated = 0;
      infoRequested = 0;

      $(bar).empty().progressbar();
      setTimeout(requestInfo, 2);
    }
  },
...

原始问题：

我有一个页面发布带有文件上传的表单并将响应定位到隐藏的 iframe。当 iframe 完成加载时，它会调用（主）页面中的一个函数。如果一切看起来都不错，我想将加载到 iframe 中的正文内容移动到主页的正文中，否则我就不管了。我确实加载了 jquery，所以我想使用它。

<body>
  <iframe name='ifr' id='ifr' style='display: none;'></iframe>
  <form target='ifr' method='post' action='mypage.php'>
  </form>
  <script>
  function finished()
  { if (iLikeIt) 
    { 
      //replace body contents with ifr.body.contents
      // keeping all event handlers attached
      // something like...

      WHAT DO I PUT HERE?
    }
  }
  </script>
</body>

加载到 iframe 中的页面以以下结尾：

<script>
  setTimeout(parent.finished, 1000); // some time for navel gazing
</script>
4

1 回答 1

1

您不需要 iframe 来执行此操作。我建议通过 ajax 提交您的表单。
由于您已加载 jquery，因此最简单的选择是使用jquery-form plugin。

这是您正在寻找的工作示例：

索引.html：

<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>

    $(function(){

        // instead of redirecting to upload.php, your form "#form"
        // will now be submitted by ajax and you'll get response
        // content in html parameter of success callback
        $('#form').ajaxForm({
            // you can handle "json" or "xml" content types too
            // @see http://jquery.malsup.com/form/#json
            dataType:  'text',
            success: function(html) {

                // in case you want to replace your document
                // content with the response content
                $(document.body).html(html);
            }
        });



        // This is how you "keep all event handlers attached", with
        // live method instead of bind.
        // So if you have #btn2 element in ajax response, and you replace
        // document content with this ajax response, jquery will auto-bind
        // 'click' event on new #btn2 element
        // Note that you can also use bind, but you'll have to "re-bind"
        // the event manualy (inside "success" callback in this case).
        $("#btn2").live("click", function(){alert("button 2 clicked")});

    });

    </script>
</head>
<body>
    <h1>ajax form:</h1>
    <form id="form" action="upload.php" method="post"> 
        <input type="file" name="file" /> 
        <input type="submit" value="Submit File" /> 
    </form>

    <h1>keeping all event handlers attached exemple:</h1>
    <button id="btn2">click me</button>
</body>
</html>

上传.php：

<?php

    // here you handle your $_FILES, $_POST, $_GET ...


    // html response example:
    header('Content-Type: text/html; charset=utf-8');
    echo '<h1>This is your ajax html response:</h1>';
    echo '<button id="btn1">click me</button>';
    var_dump($_FILES);
    echo '<h1>keeping all event handlers attached exemple:</h1>';
    echo '<button id="btn2">click me</button>';
    echo '<script>

            $(function(){

                // js event handler attached to #btn1
                $("#btn1").bind("click", function(){alert("button 1 clicked")});
            });

        </script>';
于 2012-08-06T16:39:05.030 回答