前端

Appearance

IFrame 父子组件通信 ​

效果展示 ​

请将代码复制到文件中独立运行

示例代码 ​

  • /parent.html
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>IFrame - 父页面</title>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>

		<div id="main" style="font-size: 26px;text-align: center;">
			我是父页面

		</div>

		<div style="height: 200px;border: 1px solid blue;">
			<iframe src="./son.html" frameborder="0" style="width: 100%;height: 100%;"></iframe>
		</div>

	</body>
</html>

<script>
	addEventListener('message', e => {
		console.log(e, 'e');
		if (e.data.action == 'update') {
			$('#main').css('color', e.data.color);
		}
	})
</script>
  • /son.html
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>IFrame - 子页面</title>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>

		<h3>
			我是子页面
		</h3>

		<div onclick="onClick()" style="font-size: 26px;text-align: center;">
			点我改变父页面的文字颜色
		</div>
	</body>

	<script>
		function onClick() {
			window.parent.postMessage({
				action: 'update',
				color: 'red'
			}, '*');
		}
	</script>

</html>