今天遇到个问题,后台会员审核之后,页面内的会员审核状态要及时改变,但又不能指望用户手动刷新(用户体验很不好)
如果审核页面和显示审核状态时同在一个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写法,和上面第二种同理)