js/iframe 子页面调用父页面方法与父页面调用子页方法

博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419
在做项目中都会存有主页面子页面。子页面嵌套中主页面中，主页面有主的方法，子页面有字面的方法，通常的方法是点击主页面选项打开子页面。但是我这里我要从子页面就是房态图，因为主页面和房态中有一些方法是相同，就是说从房态图中打开模态框，同时也可以从主页面打开这个模态框。也是说我这次的问题是如何从主页面中调用子页面中的方法?就想下图所示嘛，模态框已经在房态图中实现了，打开是同样的模态框总不会在主面又从新写一模一样的代码吧，所以说我只要主面点击就可调用子页面的方法，就可以打模态框了。
刚开始的时候，总想不到怎么可以父页面调用到调用到页面的方法，写了很多代码也尝试了很多遍都不成功。找不到问题在哪里，于是到网上找这个问题的解决方法。看到一了一个方法就关于这个子父页面方法互调用的。我就尝试了一下这个方法，没想到真的可以，而且代码也非常少很简单的两句代码。

一、父页面调用子页面方法：如下

子页面代码：如下图所示

这个方法是对应页面中的方法，从父页面中调用子页面什么方法，就在这个子页面中的方法写。要执行什么方法啊，什么内容就往这个写。

父页面代码：如下图所示

这个方法就是触发要子页面要执行的方法的，方法内容：声明一个变量接收个， contentWindow方法:返回 frame/iframe 生成的 window 对象。通过iframe的ID找到这个方法并且执行这个方法。
效果如下图所示
二、子页面调父页面方法:如下

子页面代码：如下图所示

写一个方法，方法内容就是（parent:匹配父元素的方法）这里也就是找到在父页面中找到方法名为这个parentFunciton的方法。注意：如果是子页调用父页方法就用 (parent);

最后给一个点击事件调用这个方法
父页面代码：如下图

这个就是在父页面中写的方法，注意：这个方法名要和子页面的中被找到的的方法名要相同，假如写的方法名不相同子页面的方法就找不到这个方法就执行不了这个方法。方法内容随你你要执行什么方法就往里写就行了。也可以把写好的方法放在这个里直接调用行了。

js/iframe 子页面调用父页面方法与父页面调用子页方法相关推荐

html调用父页面的函数,js调用父框架函数与弹窗调用父页面函数的方法
调用父级中的 aaa的函数子页面中: οnclick="window.parent.frames.aaa()" 父页面中: function aaa() { alert('bbb ...
子div超出父div_菜鸟学 react props 子到父
我们都知道在 vue 中可以使用事件将子组件的数据传递给父组件,也可以通过拿到父组件的实例直接调用父组件的方法先来个子组件 class ChildCom extends React.Componen ...
子之错父之过什么意思_子不教父之过？
学校一个小学生和同桌打闹,一不小心,把同桌的头打破了,爸爸埋怨妈妈对孩子太娇纵,声称"慈母多败儿:妈妈也不甘示弱,说孩子教不好怎么能怪她,明明是:"子不教,父之过"! 其 ...
子之错父之过什么意思_子不教父之过是什么意思？
展开全部意思是:意思是养了孩子不教育是父亲的过错.出自宋·王应麟<三字经>:"养不32313133353236313431303231363533e78988e69d83313 ...
dedecms顶级栏目列表、子栏目列表调用DEDECMS调用父栏目名称
dedecms顶级栏目列表.子栏目列表调用DEDECMS调用父栏目名称怎么在dede栏目列表或者dede子栏目列表调用DEDE调用父栏目名称?DEDECMS调用父栏目名称.DEDECMS调用子栏目里 ...
子组件向父组件传值的4种方法
目录一.背景二.4种方法 1.子组件向父组件传递一个值 2.子组件向父组件传递一个值,并携带额外参数 3.子组件向父组件传递多个值 4.子组件向父组件传递多个值,并携带额外参数一.背景详情页集 ...
VUE 子组件向父组件传值的方法
一.子组件向父组件传递一个值子组件: // 向父组件传递了两个值 this.$emit('change', this.value,this.text); 父组件: <!-- 在父组件中 ...
vue父组件使用子组件函数，vue子组件使用父组件函数
(1)vue中父组件调用子组件函数用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法详解: ...
VUE 子组件向父组件传值（含传多值以及添加额外参数场景）
一.子组件向父组件传递一个值子组件: this.$emit('change', this.value); 父组件:  <editable-ce ...

js/iframe 子页面调用父页面方法与父页面调用子页方法

js/iframe 子页面调用父页面方法与父页面调用子页方法相关推荐

最新文章

热门文章