最近在给项目搭建功能的过程中遇到了个难题,因为在设计该项目时给的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跑去父页面跑一圈呢?这当然是有目的的,当用户点击了模块页面的修改按钮后,会触发父页面中弹出页面的方法将修改客户页面新增出来,所以说来父页面转一圈是必须操作,并非多此一举:
![contenttype属性的作用_class属性的特点和用法[通俗易懂]插图7 在这里插入图片描述](https://img.bianchenghao.cn/app/bianchenghao_cn/a6ae5f46bcf147abb6b0d8cdea7ab09c.png)
![contenttype属性的作用_class属性的特点和用法[通俗易懂]插图9 在这里插入图片描述](https://img.bianchenghao.cn/app/bianchenghao_cn/39bc1a9674864166a0acfd1e2175a520.png)
今天的文章contenttype属性的作用_class属性的特点和用法[通俗易懂]分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/79271.html
![contenttype属性的作用_class属性的特点和用法[通俗易懂]插图1 在这里插入图片描述](https://img.bianchenghao.cn/app/bianchenghao_cn/ba0f4e6442974359973d11f0426fd00f.png)
![contenttype属性的作用_class属性的特点和用法[通俗易懂]插图3 在这里插入图片描述](https://img.bianchenghao.cn/app/bianchenghao_cn/21f57fb04e0a4934906049b0b185a078.png)
![contenttype属性的作用_class属性的特点和用法[通俗易懂]插图5 在这里插入图片描述](https://img.bianchenghao.cn/app/bianchenghao_cn/e647ef0593454e39b3761e53c8a75a9a.png)
![contenttype属性的作用_class属性的特点和用法[通俗易懂]插图11 在这里插入图片描述](https://img.bianchenghao.cn/app/bianchenghao_cn/179de2fb14984640962e296d2bac8ba5.png)