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

我误以为我不能同时拥有一个正在运行的脚本更新屏幕，还有一个未完成的提交会在完成时重新加载页面。

你可以做到这一点，我有。我这样做的方式是将我的更新程序放在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加载完成后，它会调用（main）页面中的函数。如果一切看起来都不错，我想将加载到iframe中的body的内容移动到主页的body中，否则我会把事情放在一边。我有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>

来源

2012-08-05 Don

你为什么不使用AJAX加载内容？它是异步的，因此当数据发回时，它会触发回调。它确实不会保留任何绑定，你必须重新调用它们。 – 2012-08-05 06:24:44

Ajax是一个更好的选择，除非你有要在IE6中工作的文件输入。 – 2012-08-05 06:34:08

“它确实不会保留任何绑定，您必须重新调用它们......”除非事件处理首先被委托给'document'。 – 2012-08-05 06:52:04

你不需要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>';

来源

2012-08-06 16:39:05 dchapkine

事实上，我不需要ajax（以任何形式），我可以在setTimeout上启动屏幕修改器功能，并让表单提交继续。 – Don 2013-09-27 19:39:18

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

回答

相关问题