如何將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的內容移動到頁面主體？

回答

相關問題