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，点击这个iframe中的某个字段，会跳出一个模态框（用于审核的iframe2），审核结束后提交信息，点击button

ok，此时数据提交到接口并进行了一系列操作（此处省略具体操作），然后iframe2窗口关闭，这个时候iframe中的某些字段应该做出改变，比

如，之前审核状态是“未审核”，在iframe2审核操作了之后，此时的状态应该变为“已审核”，用户希望的是，在点击了button按钮之后，状态立即

刷新，那么我们应该在提交数据到接口，成功之后做出点什么来改变这个状态，但是上面说了，直接用js获取iframe中的标签改变其值是行不通

的，所以我们可以这么做：

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是存在于iframe2中的，发起ajax请求向接口提交数据之后，我们来看请求成功之后的代码：

var _body = window.parent;--------------------获取这个iframe2的父级窗口，那么自然是这个body了；

var _iframe1 = _body.document,getElementById('rightMain');-------------------根据id获取iframe1这个对象；

_iframe1.contentWindow.location.reload(true);-----------------------看到reload就该知道是刷新了这个iframe了。

就这样，iframe2中的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写法，和上面第二种同理）

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

猜你喜欢