Question

更新：

由于我犯了一些错误，我误导了我认为我不能同时更新屏幕的运行脚本和完成后重新加载页面的未完成提交。

你可以做到这一点，我有。我这样做的方法是将我的更新程序放在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>

Answer 1

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

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

<强>的index.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>

<强> upload.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>';

如何将iframe的主体内容移动到页面主体？

1 个答案: