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方法指定第二个参数，如www.baidu.com

接收方：

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