iframe父子页面之间通信(跨域)

前言：

最近做官网的需求中，涉及到使用iframe。在iframe中会有父子页面之间的通信问题是比较头疼的事情。下面总结下跨域情况下父子页面之间怎么进行通信。

父页面：域名1；子页面：域名2。

一、父页面向子页面传参：

父页面：

<iframe id="iframeDom" src="" />
<script>
	// 将参数放在req中，通过src传到子页面中
	var param = { p1: 'xxx', p2: 'xxx', p3: 'xxx' };
	var paramStringify = JSON.stringify(attr);
	var iframeDom = $('#iframeDom');
	var iframeSrc = 'http://xxxxx?req=' + paramStringify;
	iframeDom.attr('src', iframeSrc);
</script>

子页面：

<script>
	var search = window.location.search;  // 得到的格式为 ?req={%22p1%22:xxx,%22p2%22:xxx}类似
	search = search.split('=')[1];
	var searchObj = JSON.parse(decodeURI(search))
	// 其中获取到的searchObj中就是在父页面中传入的参数。
</script>

二、子页面向父页面传参

核心：使用postMessage。

子页面：

<script>
	// 向iframe的父级事件进行传参
	// 参数可以是对象，也可以是数字。
	// 方式一：
	window.parent.postMessage({
		text: '子页面的文字',
		obj: { year: 2021, name: '微风吹过' },
		age: 25,
	}, '*');
	// 方式二：
	window.parent.postMessage('呦吼吼吼', '*');
</script>

父页面：

<script>
	// 针对子页面入参有下面的接收方式。
	// 方式一：
	window.addEventListener('message', e => {
      const data = e.data || {};
      console.log(data.text); // 子页面的文字
      console.log(data.age); // 25
      console.log(data.obj); // { year: 2021, name: '微风吹过' }
      console.log(data.obj.year); // 2021
      ...
    });
    // 方式二: 
    window.addEventListener('message', e => {
      const data = e.data || {};
      console.log(data); // 呦吼吼吼
      console.log(data.text); // undefined
      ...
    });
</script>

上面的postMessage使用方式只是冰山一角，如果想要详细了解postMessage的使用方式，可以移步MDN：点击查看

写在最后的话：

上面的关于iframe父子通信的方法只是我所了解到的，如果有读者有其他方法欢迎留言。