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

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

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

子页面代码：如下图所示

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

父页面代码：如下图所示

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

子页面代码：如下图所示

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

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

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