使用iframe中的按鈕重新加載IFRAME外一個div

我目前有：使用iframe中的按鈕重新加載IFRAME外一個div

<script> 
var btn = document.getElementById("doReload"); 
btn.onclick = function(){ 

    setTimeout(function(){ 
     $("#div1").load("News.php"); 
    }, 5000); 
} 

</script> 
<form action="" method="POST" enctype="multipart/form-data"> 
<input type="file" name="image" /> 
<input id="doReload" type="submit"/> 
</form>

所有這些都是使用SRC在iframe裝載=，當我點擊提交按鈕，我想它做的事一個文件上傳（目前它），然後我想它重新加載到Div1 News.php顯示更新的文件，有關如何做到這一點的任何想法？

來源

2015-02-17 Mark Shaw

你可能需要重新加載整個頁面...使用'top.location.replace（「http://example.com/」）;'做到這一點。 – TRGWII 2015-02-18 00:05:48

@TRGWII我無法加載索引頁面，並且用戶按下了一個將內容加載到該頁面的按鈕，我只需要能夠重新加載該內容 – 2015-02-18 00:14:51

只需運行用於加載初始內容的相同功能？ – TRGWII 2015-02-18 00:17:49

好的，所以問題是你的表單在超時執行函數之前提交。

您應該使用jQuery提交帶有event.preventDefault（）的表單（jQuery submit）以停止實際重新加載頁面的提交按鈕。

，這可以通過改變像這樣的代碼來完成：

document.getElementById("doReload").addEventListener("click", function(e) { 
 
    e.preventDefault(); 
 
    var form = this.parentElement; 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open(form.method, form.action); 
 
    xhr.addEventListener("readystatechange", function() { 
 
    if (xhr.readyState == 4 && xhr.status == 200) $("#div1").load("News.php"); 
 
    }) 
 
    xhr.send(new FormData(form)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<form action="upload/" method="POST" enctype="multipart/form-data"> 
 
    <input type="file" name="image" /> 
 
    <input id="doReload" type="submit" /> 
 
</form>

（解決上聊天與其他一些小的修改，這雖然最終的工作代碼）

來源

2015-02-18 00:37:18 TRGWII

這似乎不工作？你能看看我做錯了嗎？ – 2015-02-18 00:48:56

呃，我測試了一下上傳功能...：P – TRGWII 2015-02-18 00:55:33

還是不行？雖然我應該這樣想，不知道這個問題是什麼？有沒有人看到它？ – 2015-02-18 00:55:47

爲了觸發#doReload的點擊回調，嘗試把你的腳本標記後：

<form action="" method="POST" enctype="multipart/form-data"> 
<input type="file" name="image" /> 
<input id="doReload" type="submit"/> 
</form> 
<script> 
var btn = document.getElementById("doReload"); 
btn.onclick = function(){ 

    setTimeout(function(){ 
     $("#div1").load("News.php"); 
    }, 5000); 
} 

</script>

或者其包裝在$(document).ready(function() { ... });

但因爲（據我所知）沒有回調上html表單提交成功後，您可能希望使用jQuery的$.post進行發佈，然後使用其success回調來檢索新數據。

來源

2015-02-18 00:00:50 mgamba

使用iframe中的按鈕重新加載IFRAME外一個div

回答

相關問題