ifram子页面父页面相互调用

寻知图教师端---知识点统计功能用到了遮罩弹出框，页面用到了ifram 。因此出现了子页面调用父页面遮罩的问题。

实现过程如下：

1、在父页面添加遮罩和窗体标签

 1 <div class="theme-popover-mask"></div>
 2 
 3     <!-- 表格弹出框 -->
 4     <div class="theme-popover">
 5         <div class="theme-poptit">
 6             <a href="javascript:;" title="关闭" class="close" id="a_closeWin"><img
 7                 src="img/close_03.jpg"></a>
 8             <h3 id="pop_h3_tit">一元二次方程—入门学生名单（31人）</h3>
 9         </div>
10         <div class="theme-popbod">
11             <div id="pop_div_stu">
12                 <span>张三</span><span>张王三</span><span>张刘三</span><span>张赵三</span><span>张我三</span>
13             </div>
14             <button id="btn_close" class="btn-close">关闭</button>
15         </div>
16     </div>

父窗体标签

2、在子窗体中设置标签显隐

1         //显示遮罩函数
2     function showMaskStuName() {
3         $('.theme-popover-mask', parent.document).fadeIn(100);
4     }
5     //隐藏遮罩函数
6     function hideMaskStuName() {
7         $('.theme-popover-mask', parent.document).fadeOut(100);
8     }

子页面调用父页面元素

此时，引出一个问题，子页面和父页面相互调用标签和方法：

I 子页面调用父页面标签：

当前使用的子页面调用父页面标签的方式是：

A、$('.theme-popover-mask', parent.document)

经网页查询，还有其他方法

B、window.parent.document.getElementByIdx_x("元素id");

前端同事给出的方法：

C、window.parent.$('.theme-popover')

1        //弹框关闭
2     window.parent.$('.theme-poptit .close').click(function(){
3         window.parent.$('.theme-popover').slideUp(200);
4         window.parent.hideMask();
5     })
6     window.parent.$(".btn-close").on("click",function(){
7         window.parent.$(".theme-poptit .close").trigger("click");
8     });

II 子页面调用父页面方法：

A、window.parent.func();

III 父页面调用子页面标签：

A、$("#objid",document.frames('iframename').document)

B、window.frames["iframe_ID"].document.getElementByIdx_x("元素id");

参考文章：jquery、js调用iframe父窗口与子窗口元素的方法整理

有待补充的；ifram子页面和父页面交互的文章