如何将 iframe 正文的内容移动到页面正文？答案

【问题标题】：How do you move the contents of an iframe's body to the body of the page?如何将 iframe 正文的内容移动到页面正文？
【发布时间】：2012-08-05 06:17:50
【问题描述】：

更新：

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

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

【问题讨论】：

为什么不使用 AJAX 加载内容？它是异步的，所以当发回的数据准备好时它会触发回调。它确实不会保留您必须重新调用它们的任何绑定。
Ajax 是一个更好的选择，除非你当然有想要在 IE6 中工作的文件输入。
“它确实不会保留任何你必须重新调用它们的绑定”......除非事件处理首先被委托给document。
是的，有文件上传。我知道我必须手动重新连接事件处理程序吗？

标签： javascript jquery iframe

【解决方案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>

上传.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>';

【讨论】：

事实上我不需要 ajax（在任何形式中），我可以在 setTimeout 上启动屏幕修改器功能并让表单提交继续。