iframe获取父级标签及控制父级样式

预实现的功能：在iframe层的Js中控制父级css样式，以实现覆盖整个页面的弹层遮罩。

父级HTML 内容

<div id="main-shade"><p>提交中，请稍后...</p></div>

父级 CSS样式

#main-shade{display: none;position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(0,0,0,0.4);}#main-shade p{position: absolute;top: 50%;left: 50%;width: 100px;height: 40px;line-height: 40px;margin: -50px 0 0 -20px;font-size: 20px;text-align: center;background: blue;}

问题：在iframe中的js无法直接通过id或类名控制父级样式

解决办法：

利用搜索工具搜索到如下解决办法

1.获取iframe 的父级id 为mask的内容。

$('#main-shade',window.parent.document);

2.控制iframe 父级 id为mask绑定事件

$('#main-shade',window.parent.document).on('click', function(){

...//事件

});

3.设置iframe 父级id为.mask 设置css样式

$('#main-shade',window.parent.document).css("display","block");