使用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页面的JSfunction refershParentPage(){window.opener.location="javascript:refreshWorkPool();"; //调用A页面的function}A页面的JSfunction refreshWorkPool(){ document.getElementById("#queryEsDocMainPages").click();}

2、直接调用A页面查询方法B页面的JSfunction refershParentPage(){window.opener.location="javascript:queryEsDocMainPages();";}

————————————————
版权声明：本文为CSDN博主「安柏靖宁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/W_and_Z/article/details/106888413

使用JS实现子页面调用父页面的函数相关推荐

js代码父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!!  <script type="text/javascript"> //调用子页面的方法 ...
iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用父页面js函数子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
vue 子页面调用父页面常用方式
vue 子页面调用父页面常用方式父组件 <template><div><child @fatherMethod="fatherMethodOther" ...
vue使用iframe 子页面调用父页面的方法
// 子页面调用父页面方法 var id = parent.vm.getId();
js/iframe 子页面调用父页面方法与父页面调用子页方法
博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419 在做项目中都会存有主页面子页面.子页面嵌套中主页面中,主页面有 ...
父页面调子iframe页面方法和子iframe调用父页面方法
一.父窗口调用iframe子窗口方法 1.HTML语法:<iframe name="myFrame" src="child.html"></ ...
vue 子页面调用父页面的参数_js父页面调用子页面数据时，子页面通过父页面传过来的参数回调父页面具体方法_html/css_WEB-ITnose...
今天写代码时发现同一页面多个地方需要调用同一个子页面,如果多个方法调用时,同一子页面回调父页面方法则会出问题,所以查了下资料,让这个功能通用化,根据具体方法回调具体父页面方法,顺便总结一下,希望以后可 ...
vue 子页面调用父页面的参数_Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图父级组件实现在父级组件中写一个_editParentText的方法来修改组件中 ...
vue 子页面调用父页面方法、回写父页面数据
方法一推荐使用:this.$parent // 调用父类的方法 this.$parent.getlist() // 给父页面对象赋值 this.$parent.proForm = response. ...

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

使用JS实现子页面调用父页面的函数相关推荐

最新文章

热门文章