iframe中父级数据传到子级父子通讯postMessage

最新推荐文章于 2023-12-15 17:34:18 发布

该走的弯路，一步都不会少。

最新推荐文章于 2023-12-15 17:34:18 发布

阅读量426

点赞数

分类专栏：前端文章标签： HTML iframe postMessage 数据交互父子页面

本文链接：https://blog.csdn.net/weixin_44292923/article/details/123281862

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有个需求是从父级的页面中传值到iframe的子页面中，然后再子页面中渲染。也可以从父页面中获取子页面的数据，具体如下

子页面获取父页面数据

父页面中进行传送数据

<!DOCTYPE html>
<html>
<head>
  <title>父页面</title>
</head>
<body>
	<button onclick="toParent()">传值按钮</button>
	  <div class="parent">
		<iframe id="iframes" src="./b.html"></iframe>
	  </div>
</body>
<script>
function toParent(){
	let iframes = document.getElementById("iframes")
	iframes.contentWindow.postMessage({
		data:{
			name:666
		}
	},'*')
}
</script>
</html>

子页面进行接收

<!DOCTYPE html>
<html>
<head>
  <title>子页面</title>
</head>
<body>
  <div onclick="toParent()">
	  <span>子页面接收数据为</span>
	  <span id="children"></span>
  </div>
  
</body>
<script type="text/javascript">
	window.addEventListener('message',(e)=>{
		console.log(e)
		document.getElementById('children').innerHTML = e.data.data.name
	})
</script>

</html>

父页面接收子页面的数据

父页面接收

<!DOCTYPE html>
<html>
<head>
  <title>父页面</title>
</head>
<body>
	  <div class="parent">
		<iframe id="iframes" src="./b.html"></iframe>
	  </div>
	  <div id="father"></div>
</body>
<script>
window.addEventListener('message',(e)=>{
	console.log(e)
	document.getElementById('father').innerHTML = e.data.data.name
})
</script>
</html>

子页面传送

<!DOCTYPE html>
<html>
<head>
  <title>子页面</title>
</head>
<body>
	<button onclick="toParent()">传值按钮</button>
</body>
<script type="text/javascript">
	function toParent(){
		window.parent.postMessage({
			data:{
				name:666
			}
		},'*');
	}
</script>
</html>