javascript - 使用 iframe 内的按钮重新加载 iframe 外的 div

Question

我目前有:

<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 中，当我单击提交按钮时，我希望它执行文件上传(目前正在执行)，然后我希望它重新加载 News.php 到 Div1 以显示更新的文件，关于如何执行此操作的任何想法？

Answer 1

好的，所以问题是您的表单在超时执行函数之前提交。

您应该使用 jQuery 提交表单 ( jQuery submit ) 和 event.preventDefault() 以阻止提交按钮实际重新加载页面。

这可以通过像这样更改代码来完成:

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>

(通过聊天解决了一些其他的小修改，不过这是最终的工作代码)