layui子页面刷新父页面中的iframe




1、场景: 后台管理--》用户管理(iframe) -->  用户修改(layer、iframe) ,要求在修改完用户后刷新  用户管理页面



完整代码:

$.post(url,values,function(result){
		 // 添加成功,刷新页面数据
		 if("SUCCESS" == result.code){
			 layer.msg(result.msg , function(){
				 $(parent.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload() ;
				 parent.layer.closeAll();
			 }) ;
		} else if("610" == result.code){
			parent.layer.closeAll() ;
			top.location.href="<%=path%>/login" ;
		} else {
			layer.msg(result.msg) ;
		}
	 }) ;


parent.layer.closeAll(); 关闭所有layer


刷新iframe页面: $(parent.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload() ;


如果当前layer 是在顶层,使用$(parent.window.document)... 就可以获取到当前iframe

如果当前layer 在iframe的顶层,则要使用$(top.window.document)... 才能获取到当前iframe(先获取顶层窗口)



1、获取到父页面

$(parent.window.document) 获取顶层窗口文档对象
$(top.parent.window.document)


2、获取指定frame

$(parent.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")

然后将jquery对象转为dom对象

$(parent.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")[0]


然后获取iframe的window对象

$(parent.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow


刷新该iframe

$(parent.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload() ;




2、场景: 后台管理--》用户管理(iframe) -->  用户修改(layer、iframe) ,要求在修改完用户后刷新  用户管理页面

如果修改的数据是通过条件查询的结果,直接使用contentWindow.location.reload()后,查询条件就都没了,不能第一时间看到修改结果。

思路:修改完成后刷新页面时带参数,本人没有找到可以直接调用点击父页面查询按钮, 但是contentWindow能调用父页面方法,所以可以使用$(top.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow.clickReload() ;的方式调用父页面的方法。


子页面:

业务处理完后,关闭layer,$(top.window.document).find(".clildFrame .layui-tab-item.layui-show").find("iframe")[0].contentWindow.clickReload() ;


父页面:

function clickReload(){

console.log("clickReload ... ") ;

$('.searchDiv #reload').click() ;  // 查询按钮

}




补充知识:

1、window和contentWindow

浏览器就会为原始文档创建一个 window 对象,再为每个框架(iframe)创建额外的 window 对象。这些额外的对象是原始窗口的子窗口,可能被原始窗口中发生的事件所影响。例如,关闭原始窗口将导致关闭全部子窗口。contentWindow属性是指指定的frame或者iframe所在的window对象。


2、dom对象和jquery对象互转

$()  将dom转为jquery对象 : 如$(parent.window.document)  
[0]或get(0)      find("iframe")[0]





layui iframe dom

2020.11.18 21:08

https://www.meihaocloud.com.com/171.html , 欢迎转载,请在文章页标出原文连接 !


Copyright © 2020 千夕网 联系站长

粤公网安备 44030302001408号 粤ICP备19099833号-1