js操作iframe：父页面-子页面之间相互操作

心月IT博客 12-04

默认

摘要：虽然通过 iframe 嵌套页面后，从浏览效果上看都是在同一个页面，但实际上 iframe 和父页面是相对独立了，iframe 内的页面和父页面之间并不能直接通过 js 操作对方。

虽然通过 iframe 嵌套页面后，从浏览效果上看都是在同一个页面，但实际上 iframe 和父页面是相对独立了，iframe 内的页面和父页面之间并不能直接通过 js 操作对方。下面心月博主就通过小实例来演示，如何通过JavaScript 来实现 iframe 和父页面之间的相互操作。

1、子页面操作父页面

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<div id="child">操作父级元素</div>
	<script type="text/javascript">
		var childVar = "我是子页面变量";
		$('#child').click(function(){

			// 获取父页面的变量
			alert(window.parent.window.parent.parentVar);
                        
                        //操作页面父元素
			// jQuery 操作
			$("#parentID",parent.document).after("<div style='height:100px;width:100px;background:#eee;float:left;'>jQuery操作：我来自iframe页面</div>")

			// 原生 JavaScript 操作
			var div = document.createElement('div');
			div.setAttribute("class","from-iframe");
			div.innerHTML = "原生JavaScript操作：我来自iframe页面";
			div.style.height = "100px";
			div.style.width = "100px";
			div.style.background = "#92e439";
			div.style.float = "left";
			window.parent.document.getElementsByClassName("container")[0].appendChild(div) 
		})
	</script>
</body>
</html>

2、父页面操作子页面

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		iframe{clear: both;display: block;margin: 20px auto;width: 680px;height: auto;/*float: left;margin-left: 300px;*/}
		.container { display: block;min-width: 320px;max-width: 640px;font-size: 15.5px;font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;            color: #000;margin: 20px auto;}
	</style>
</head>
<body>
	<div class="container">
		<div id="parentID">操作iframe</div>
	</div>
	<iframe src="child.html" id="iframeID" name="child-iframe"></iframe>
	<script type="text/javascript">
		var parentVar = "我是父页面变量";
		$('#parentID').click(function(){

			// 获取子页面变量 
			alert(document.getElementById("iframeID").contentWindow.childVar);

			// 操作 iframe子页面
			// jQuery 操作
			 $("#iframeID").contents().find('#child').after("<div style='height:100px;width:100px;background:#ffce44;float:left;'>jQuery操作：我来自父级页面</div>")

			// 原生 JavaScript 操作
			document.getElementById("iframeID").contentDocument.getElementsByTagName('body')[0];
			var div = document.createElement('div');
			div.setAttribute("class","from-parent");
			div.innerHTML = "原生JavaScript操作：我来自父级页面";
			div.style.height = "100px";
			div.style.width = "100px";
			div.style.background = "#19a15f";
			div.style.float = "left";
			document.getElementById("iframeID").contentDocument.getElementsByTagName('body')[0].appendChild(div) 

		})
	</script>
</body>
</html>

实际效果：

js操作iframe：父页面-子页面之间相互操作