iframe引用页面并进行页面间的通信

前言：

由于项目中有一部分内容为svg图标，在各个项目中重复引用，因此提出了将svg图标部分放置在单独的项目中运行，引用者只需要按规则传入固定的值，即可进行对应svg的引用。

父组件代码

html代码：

<iframe id="receiver" src="http://192.168.1.17:8080/" width="1100" height="740"></iframe>

JS代码：

window.onload = function(){    //在页面加载完成后主页面向iframe发送请求
    let val = {
        这里些需要传入的值
    }   
    window.frames[0].postMessage(val,'http://192.168.1.17:8080/');
}

以上代码为在页面加载之后调用方法向引用的页面进行传值，但是被引用页面需要将值传入父组件，还需要再调用一个方法，方法如下：

// 主页面监听message事件,接收子组件的值
window.addEventListener('message', function(e){
    console.log(e.data) // 打印值
}}, false);

子组件代码

JS代码：

获取父组件传来的值

window.addEventListener('message', function(e) {
    if (e.source != window.parent)
    return;
    console.log(e.data); // 打印值
}, false);

将值传入父组件

window.parent.postMessage('要传入的值','*'); // 将值传入父组件

备注

父页面和子页面的传值需要在页面加载完成之后调用