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

最新推荐文章于 2024-05-15 18:00:00 发布

zqian11

最新推荐文章于 2024-05-15 18:00:00 发布

阅读量3.7k

点赞数 1

分类专栏： web开发文章标签： iframe 遮罩弹窗

本文链接：https://blog.csdn.net/qq_40341311/article/details/78401946

版权

web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

预实现的功能：在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");