ContentWindow属性的用法及作用

最近在给项目搭建功能的过程中遇到了个难题，因为在设计该项目时给的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值拿到手：

ContentWindow属性的用法及作用相关推荐

H5 中 bordercolorlight 属性的用法及作用
一.问题场景今天在复习 H5 页面设计表格,发现<table>标签中添加了新的属性:bordercolorlight.我们来看看有什么作用. 示例如下: table bordercolo ...
教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
inline内联的用法与作用
inline内联的用法与作用内联函数是一种编译机制,优点从代码上是看不出来的,但是程序的执行效率上有差别,通常,编译器对函数调用的处理是一种类似中断的方式,即当执行到函数调用语句时,程序把 ...
详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
自定义控件三部曲之动画篇（一）——alpha、scale、translate、rotate、set的xml属性及用法...
前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随 ...
a jquery 标签点击不跳转_form标签的action属性怎么用？form标签action属性的用法介绍（附实例）...
本篇文章主要的介绍了关于HTML中form标签action属性的用法介绍和实例,还有关于form标签的action属性的定义和语法介绍,最后徐还有关于form标签的action属性的作用解释.现在让我 ...
自定义控件三部曲之动画篇（一）——alpha、scale、translate、rotate、set的xml属性及用法
相关文章: <Android自定义控件三部曲文章索引>:http://blog.csdn.net/harvic880925/article/details/50995268 一.概述 An ...
html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
html标签验证的作用,HTML元素blockquote标签的用法及作用
html元素标签主要用于引用长文本,有关该标签的用法及作用详解如下: 标签的定义标签是引用一段长文本内容: 标签是一个块元素,引用的文本内容会形成一个独立的引用块: 标签引用的文本内容会在左右两端 ...

ContentWindow属性的用法及作用

ContentWindow属性的用法及作用相关推荐

最新文章

热门文章