ifram子页面与父页面之间的传值

相信很多小伙伴在项目中都会遇到需要嵌入外链页面的情况，这时候很可能会遇到一个问题，就是如何在iframe子页面自己的项目页面之间传值，特别是跨域的情况

1. 同域的情况

1.1 相互获取dom元素

1.1.1 在父页面获取子页面的dom元素：

//先获取 iframe,再在iframe所在的 document 找 dom 元素，根据id查找；
document.getElementById('iframe‘).contentWindow.document.getElementById(‘domId’);

1.1.2 子页面获取父页面的dom元素

//window.parent可以回到父页面
window.parent.document.getElementById(‘domid’);

1.2 相互调用方法

父页面调用子页面方法：iframeName.window.childMethod();
子页面调用父页面方法：parent.window.parentMethod();

1.3 相互调用变量

父页面访问子页面变量： document.getElementById('iframe’).name(子页面变量名)；
子页面访问父页面变量：parent.name(父页面变量名)；

2. 跨域的情况

同域情况比较简单，主要说一下跨域情况下的方案，一般有两种解决方案。一种是建立一个代理页面，通过代理页面传值。另一种是通过H5的 postMessage 方法实现。
这里说一下第二种方案，并且以vue项目举例

2.1 子页面向父页面传值

vue父页面

created() {
	window.addEventListener('message', e => {
		// e.data为子页面发送的数据
		console.log(e.data);
	})
}

iframe子页面

// 第一个参数 data 为传输的数据，第二个参数可以指定接收源
document.getElementById('iframe').contentWindow.postMessage(data,'*') 

2.2 父页面向子页面发送数据

vue父页面

// 注意：这里 vue 中需要写在 mounted 中，保证能拿到 iframe 的dom元素
mounted() {
	// 这里也可以使用 getElementById 获取 iframe 元素
	const iframe = this.$refs.iframe
	iframe.contentWindow.postMessage(data,'*')
}

iframe子页面

window.addEventListener('message', e => {
	// e.data为父页面发送的数据
	console.log(e.data);
})

2.3 还可以做安全性优化

上面的接收源都是使用’*’,也就是不限制接收源的IP,端口
如果出于安全性考虑，可以使用以下方法进行优化

发送方：

postMessage方法指定第二个参数，如http://www.baidu.com

接收方：

监听 message 的回调，使用e.origin判断信息来源