iframe+postMessage实现父子页面跨域传数据

only you502

已于 2022-01-18 17:37:10 修改

阅读量2.3k

点赞数

分类专栏：跨域问题文章标签： javascript

于 2022-01-18 17:14:30 首次发布

本文链接：https://blog.csdn.net/qq_55949207/article/details/122563819

版权

跨域问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说明：以下方式亲测有效

1、子页面向父页面传数据

top.postMesaage('消息',*);
//或者用 window.parent.postMessage(objInfo,'*');

2、父页面接收数据

window.addEventListener('message', function(e){
    console.log(e.data)//e.data就是子页面传过来的消息
}

3、父页面文件parent.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父页面</title>
	</head>
	<body>
		<div id="">
			父页面：
		</div>
		<div id="">
			<label>接收到的消息：</label>
			<span id="info-data">
				
			</span>
		</div>
		<iframe src="http://127.0.0.1:8848/resources/%E6%96%B9%E6%B3%95%E6%B5%8B%E8%AF%95/%E7%88%B6%E5%AD%90%E9%A1%B5%E9%9D%A2%E8%B7%A8%E5%9F%9F%E9%80%9A%E4%BF%A1/son.html" width="" height=""></iframe>
	</body>
	<script type="text/javascript">
		var obj = document.getElementById('info-data');
		// 接收子页面传过来的数据方法
		window.addEventListener('message', function(e){
			console.log('父接收：',e.data);
			obj.innerText = 'name：' + e.data.name + '+ value：' + e.data.value + '+ info：' + e.data.info
		},false);
		
	</script>
</html>

此处需注意iframe标签的src属性，不能在同一目录下引入，只能用前面带有域名的url，跨域传值才有效，否则子页面取不到window，即取不到top。比如这里前面带有:http://127.0.0.1:8848

4、子页面文件 son.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子页面</title>
	</head>
	<body>
		<div id="">
			子页面：
			
		</div>
		<div id="">
			<label>向父页面发消息：</label>
			<button type="button" class="mui-btn mui-btn-blue">按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		var obj = document.getElementsByTagName('button')[0];
		var objInfo = {
			name: '子页面发出的消息',
			value: '22111',
			info: '输入'
		}
		obj.onclick = function() {
			// 发送给父页面的方法
			top.postMessage(objInfo,'*');
			console.log('fasong',window)
		}
	</script>
</html>

5、效果图：