ContentWindow属性的用法及作用

大家好，欢迎来到IT知识分享网。

最近在给项目搭建功能的过程中遇到了个难题，因为在设计该项目时给的iframe子页面非常多，从头到尾数下来的话起码得有十多个子页面，当时搭页面的时候用了layui中的Tab选项卡插件，让用户可以通过点击所需的业务按钮来弹出相对应的分页面。但子页面多也并不是件好事，几乎每个子页面都需要用到父页面的中的方法，打开存放在父页面中与该业务相关的模态框、遮罩层，或是让父页面刷新，这都需要通过js中的parent属性去实现。反过来说，父页面也始终会用到子页面中定义好的方法，而我现在碰上的难题便是如此。

子调用父的方法我知道通过parent属性便可以搞定，但让父调用子的方法，确实是不懂该如何解决，但当时可以想到的是：既然有parent这种属性可以帮助我们让父调用子中的方法，那么也一定会有和parent类似作用的属性存在，所以接下来我便只好在求助万能的互联网。在互联网大哥的帮助下，果然不出我所料，让我找到了本期的主人公ContentWindow属性。

也许是ContentWindow属性比较冷门吧，在W3school离线学习文档中找不到它的存在，但是它却是真实有效的，完全可以在js中被使用：

通过在网上查找到的资料，我了解到关于contentWindow属性的js写法有两种，如下图：1.第一种是先通过document.getById获取到子页面的iframe标签，然后一点后直接使用contentWindow属性，紧挨着后面跟着的便是子页面中的某个方法；2.第二种写法是以一种变量赋值的形式来调用contentWindow属性的，将相应的子页面对象赋值到该变量当中，接着也可以使用其中的方法了。

写法及用法已了解，剩下的便是通过它来帮忙解决难题。那时候在继续搭建着其中一个子页面模块中的功能，该模块只剩下修改信息的功能还没有做好，其余的新增、导出、导入、删除这些基础功能都已经搭建完成，将修改留到最后再做的原因就是这个难题。修改与其他的新增&删除这些功能相比，最大的不同点就是它需要多传一条主键ID数据。但关键便是这主键ID我不知该怎么将它从管理页面传到修改页面(又一单独的子页面)，就是这道坎儿变成了卡住进度的难题。开头的时候便提到过，该项目在设计布局时便已经形成了这种一个业务模块大概有三四个相关联的功能性子页面囊括其中的这种结构，如下图：

现在，当知道了contentWindow属性的作用后，这难题也就迎刃而解了。第一步要做的是先通过parent属性将主键ID值从管理页面(子)传输到父页面的方法中，为什么要带着主键ID跑去父页面跑一圈呢?这当然是有目的的，当用户点击了模块页面的修改按钮后，会触发父页面中弹出页面的方法将修改客户页面新增出来，所以说来父页面转一圈是必须操作，并非多此一举：
第二步，当修改页面出来后，主键ID也肯定是成功的传到了父页面中，这时就轮到我们的contentWindow属性登场了，通过contentWindow属性的帮助，调用修改子页面中的接收方法将主键ID传到了该页面中，然后再弹出修改页面，这样便可以使修改页面成功的接收到ID值了，大功告成！(终于不用带着这ID转圈了。。。)
第三步，将视线移到修改页面这边，怎么处理历尽“千辛万苦”才到达目的地的ID值呢，上一步父页面调用的方法其实是修改页面中的post提交方法，直接将ID值提交到控制器的cookie封装方法中去了，将ID值封装成cookie，再通过@ViewBag获取，最终将ID值拿到手：