使用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

回答

相关问题