使用JS实现子页面调用父页面的函数
在JS中,子页面调用父页面的方法常使用为
1、window.parent.xxx();
2、window.opener.xxx();
对比这两个方法,需要思维转换一下,这两个parent和opener都代表父页面的意思,但是并不一样:
window.parent能够获取一个框架的父窗口或父框架,顶层窗口的parent引用是他的本身
window.opener引用的是window.open打开的页面的父页面
parent表示父窗口,比如一个A页面利用iframe或者iframe调用了B页面,那么A页面就是B页面的parent
opener即是谁打开我的,比如一个A页面利用window.open('B页面'),那么A页面就是B页面的opener
例如在在Chrome浏览器中,可以使用F12,打开console,执行下面的命令,然后回车,对比打印出来的结果
1、window.parent.document;
2、window.opener.document;
在让父页面刷新的时候,可以使用window.opener.location.reload();的方式进行刷新,相当于一个F5的操作,但是往往,我们只是需要对用户的操作进行一个响应,进行一个局部的数据刷新,那么window.opener.location.reload();已经不再适用
以下是我自己的查询按钮、查询方法
A页面的查询按钮
<div class="button_query">
<label>
<input class="query_button" type="button" value='查询' id="queryEsDocMainPages" onclick="queryEsDocMainPages();"/>
</label>
</div>
A页面的查询方法
function queryEsDocMainPages() {
starScantDate = $("#q_startscandateone").combobox("getValue");
endScanDate = $("#q_endscandateone").combobox("getValue");
if (starScantDate == null || starScantDate == "" || starScantDate == undefined) {
$.messager.alert("操作提示", "开始时间不能为空", "warning");
return false;
} else if (endScanDate == null || endScanDate == "" || endScanDate == undefined) {
$.messager.alert("操作提示", "结束时间不能为空", "warning");
return false;
} else if (checkTime(starScantDate, endScanDate)) {
queryData('/esvideoMain/queryAllPage.html', 'qp_frm', 'tp_grid', 'getQueryParamsone'); //前面的if else都是验证,queryData为封装的查询方法
}
}
那么问题来了,如何调用A页面的查询方法呢?
1、模拟一次A页面的点击事件,来实现数据的刷新
B页面的JS
function refershParentPage(){
window.opener.location="javascript:refreshWorkPool();"; //调用A页面的function
}
A页面的JS
function refreshWorkPool(){
document.getElementById("#queryEsDocMainPages").click();
}
2、直接调用A页面查询方法
B页面的JS
function refershParentPage(){
window.opener.location="javascript:queryEsDocMainPages();";
}