Javascript 使用iframe内的按钮在iframe外重新加载div
我目前有:Javascript 使用iframe内的按钮在iframe外重新加载div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我目前有: <script> var btn = document.getElementById("doReload"); btn.onclick = function(){ setTimeout(function(){ $("#div1").load("News.php"); }, 5000); } </script> <form action="" method="POST" enctype="multipart/form-d
<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>
var btn=document.getElementById(“doReload”);
btn.onclick=函数(){
setTimeout(函数(){
$(“#div1”).load(“News.php”);
}, 5000);
}
所有这些都是使用src=加载到iframe中的,当我单击submit按钮时,我希望它进行文件上载(它目前正在进行),然后我希望它将News.php重新加载到Div1中以显示更新后的文件,关于如何进行此操作的想法?为了触发#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>
var btn=document.getElementById(“doReload”);
btn.onclick=函数(){
setTimeout(函数(){
$(“#div1”).load(“News.php”);
}, 5000);
}
或者将其包装在$(document.ready(function(){…})中代码>
但是由于(afaik)没有对html表单提交成功的回调,您可能希望使用jQuery的$.post
,然后使用其success
回调来检索新数据。好,所以问题是您的表单在超时执行函数之前提交
您应该使用jQuery提交表单(),并使用event.preventDefault()停止提交按钮实际重新加载页面
这可以通过如下更改代码来实现:
document.getElementById(“doReload”).addEventListener(“单击”,函数(e){
e、 预防默认值();
var form=this.parentElement;
var xhr=new XMLHttpRequest();
xhr.open(form.method,form.action);
addEventListener(“readystatechange”,function()){
如果(xhr.readyState==4&&xhr.status==200)$(“#div1”).load(“News.php”);
})
xhr.send(新表单数据(表单));
});代码>
您可能需要重新加载整个页面。。。使用top.location.replace(“http://example.com/");
可以这样做。@TRGWII我不能加载索引页,而用户按下一个按钮可以将内容加载到该页,我只需要能够重新加载该内容就可以运行与加载初始内容相同的功能?另外,您绝对需要使用帧吗@TRGWII我更愿意这样,我不需要重新加载似乎不工作的页面?你能看到我是否做错了什么吗?呃,我测试了一下上传功能…:PStill似乎不工作?虽然我应该这样想,但我不确定问题是什么?有人看到了吗?你可以删除你上传的内容。这是一个内容可编辑的div,只需从div中删除图片,然后点击Save即可。现在试试看,您仍然将脚本放在html:P之前