对Iframe这个组件的一些理解_iframe组件-优快云博客

本文介绍了作者在项目中使用Iframe时的经历，重点讲述了如何通过window.parent.document.getElementById()实现iframe内外元素的交互，并提及了在不同iframe间进行元素操作的方法，包括contents().find()。虽然过程中遇到了挑战，但分享了这一学习过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

讲道理说实话很烦！！！！！！！！！！！！！！！！
我在一次项目中运用到iframe时候我的脑袋里第一个想法就是，这是个什么玩意。。。。好吧，废话不多说，接下来就是我对这个玩意的一些个人理解

首先就是iframe的基本应用了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#father_div{
				background: #000000;
			}
		</style>
	</head>
	<body>
		<div id="father_div">
			<div id="child_content">
				<button id="btn">点击取消</button>
			</div>
		</div>
		<iframe id="child_iframe" width="400" height="400" src="iframe_one.html" frameborder="0"></iframe>
	</body>
	<script type="text/javascript">
		(function($){
			$("#btn").on({
				"click": function(){
					$("#father_div").css({
						"display":"none"
					})
				}
			})
		})(jQuery)
	</script>
	</html>

我的目的是让iframe里面的元素能够对它元素外的元素进行操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#wrap{
				background: #00FFFF;
				width: 100%;
				height: 500px;
			}
		</style>
	</head>
		<body>
		<div id="wrap">
			<button>点击我改变父元素的元素的显示</button>

		</div>
	</body>
	<script type="text/javascript">
		(function($){
			$("#wrap").on({
				"click":function(){
				    //这是一种写法  下面还有另一种写法
					var father = window.parent.document.getElementById("father_div");
					father.style.display = "block";
				}
			})
		})(jQuery)
	</script>

通过window.parent.document.getElementById("")可以获得iframe父元素的所有东西，这样我们就可以对iframe本身以外的元素为所欲为。
当然两个iframe之间的调用还要在进过一个步骤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#wrap{
				background: #00FFFF;
				width: 100%;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<button id="btn_one">点击我改变父元素的元素的显示</button>
			<button id="btn_two">我是对我的好兄弟进行搞事情</button>
		</div>
	</body>
	<script type="text/javascript">
		(function($){
			$("#btn_one").on({
				"click":function(){
					//$(window.parent.father_div)获得父元素中的元素window.parent.元素的ID
					$(window.parent.father_div).css("display","block");
				}
			});
			$("#btn_two").on({
				"click":() => {
					//$(window.parent.child_iframe_two)获得父元素中的iframe在获得Iframe里面的内容再从内容去找成员
					$(window.parent.child_iframe_two).contents().find("#two_chidren_div").css({"background":"black"});
				}
			})
		})(jQuery)
	</script>

对于只有一层的iframe来说只要通过/$(window.parent.元素ID)就可以直接获得元素，对于从父级中找到另一个iframe，要对里面的iframe元素进行操作就要在两个方法contents().find(元素ID)；
这就是菜鸟的我的一些运用，这也是我刚接手的一个项目中要用到的。。。。讲道理说实话很烦刚接手项目就遇到一个自己不会用的知识盲区真的很烦