js控制iframe的刷新（页面局部刷新）

js控制iframe的刷新（页⾯局部刷新）
今天遇到个问题，后台会员审核之后，页⾯内的会员审核状态要及时改变，但⼜不能指望⽤户⼿动刷新（⽤户体验很不好）
如果审核页⾯和显⽰审核状态时同在⼀个html页⾯的话，那么直接⽤js改变div内部的⽂本就可以了，像下⾯这样：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
但是，后台页⾯的布局是这样的：
这画的应该不难看出来吧，不过我还是要说明⼀下；
⼀个html中包含⼀个iframe1，点击这个iframe1中的某个字段，会跳出⼀个模态框（⽤于审核的div2），审核结束后提交信息，点击button ok，此时数据提交到接⼝并进⾏了⼀系列操作（此处省略具体操作），然后div2窗⼝关闭，这个时候iframe1中的某些字段应该做出改变，⽐如，之前审核状态是“未审核”，在div2审核操作了之后，此时的状态应该变为“已审核”，⽤户希望的是，在点击了button按钮之后，状态⽴即刷新，那么我们应该在提交数据到接⼝，成功之后做出点什么来改变这个状态，但是上⾯说了，直接⽤js获取iframe1中的标签改变其值是⾏不通
的，所以我们可以这么做：
function check_pass(uid) {
$.ajax({
type: "GET",
url: siteurl,
dataType: "json",
data:{
"c":"api",
"m":"checkpass",
"uid":uid
},
success: function(text) {
var _body = window.parent;
var _iframe1=_body.document.getElementById('rightMain');
_iframe1.contentWindow.location.reload(true);
}
});
}
这个函数是在button点击的时候执⾏的，button是存在于div2中的，发起ajax请求向接⼝提交数据之后，我们来看请求成功之后的代码：var _body = window.parent;--------------------获取这个div2的⽗级窗⼝，那么⾃然是这个body了；
var _iframe1 = _body.document,getElementById('rightMain');-------------------根据id获取iframe1这个对象；
_iframe1.contentWindow.location.reload(true);-----------------------看到reload就该知道是刷新了这个iframe1了。

就这样，div2中的js操作实现了iframe1的刷新，现在看来真的很简单，只不过当时绕了⼀些弯⼦，现在顺便总结⼀下iframe窗⼝的刷新⽅法：
（注：下⾯的_iframe是通过各种⽅法获得的iframe对象，⽐如通过name获得、通过id获取等等）
①_iframe.contentWindow.location.reload(true);
②_iframe.src=src;（前⾯的src是_iframe的src属性，后⾯是是⼀个字符串值应该和它原本的属性值相同，不然怎么叫"刷新"呢）
③$('#iframe').attr('src', $('#iframe').attr('src'));（jQuery写法，和上⾯第⼆种同理）
--------------------------------------------------------------------------------华丽的分割符------------------------------------------------------------------------------------
（5.31）今天，⼜遇到⼀个ajax提交，iframe刷新的例⼦，
ajax提交的数据是从select和input中取得的，如下图所⽰：
const siteurl = "{SITE_PATH}{SELF}";
const stateids=$(".stateid");
var stateval = "";
var moneyval ="";
var stateid ="";
for(let i=0;i<size;i++){
$(sure[i]).click(function(){
stateval = $(state[i]).val();
moneyval = $(money[i]).val();
stateid = $(stateids[i]).val();
$.ajax({
type: "GET",
url: siteurl,
dataType: "json",
data:{
"c":"api",
"m":"state",
"stateval":stateval,
"moneyval":moneyval,
"id":stateid
},
success: function(text) {
eco_refresh();
},
error: function(text) {
eco_refresh();
}
});
});
};
因为每⼀条记录都有修改这个选项，⽽且取值是取当前记录的select和input的值，记录是⽤类for循环语句输出的，所以
他们的样式以及DOM结构都是⼀样的，取值的时候为了确保取值正确，⽤到了上⾯的for循环，红字的jQuery对象依次表⽰确认按钮、select标签、input⾦额标签（select值为认筹的时候才会显⽰）、input记录ID值标签（类型为hidden，看不见的，仅为取id值所⽤）
注意这⾥⽤了let声明变量i，这⾥涉及到作⽤域的概念，如果你⽤var声明i，然后再内部var that = i，然后$(state[that])也
是可以的，对于let、var、const、this的区别会在博主理解透彻之后专门写⼀篇博⽂来记录，这⾥就不探讨了。

上⾯的代码不难看出，每个确认按钮点击的时候会提交⼀个ajax请求，⾄于为什么success和error回调都选择刷新iframe，回调执⾏问题）
如此想来，提交ajax后，直接执⾏刷新的⽅法应该就OK了，但是问题却出现了，
这是之前iframe和div提交刷新都不曾出现的问题，之前也是有input填写信息然后取值提交的，只不过这次多了⼀个select 取值的问题，于是个⼈猜测应该是select标签onChange事件之后，值发⽣改变，浏览器的机制好意提醒我们，但是显然我们是不想这种机制来⼲扰⽤户体验的，于是百度⼀下，找到了答案：
于是将解决⽅法添加到refresh函数：
function eco_refresh(){
var _body = window.parent;
var _iframe1=_body.document.getElementById('rightMain');
window.onbeforeunload=function(){};
_iframe1.contentWindow.location.reload(true);
}
之后便抑制了弹窗的出现。