使用JS实现子页面调用父页面的函数

使用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();";
		}