前端vue项目和iframe项目之间的数据交互

方法1 通过url交互；

在vue项目中写入你所需要传输的参数

:src="'http://localhost:8090/byzt/client_view.html?stageId='+stageList[stageIndex].stageId+'&d='+theTime"

在iframe中去解析；

方法2 通过postMessage

vue父页面的代码

<div class="zt_dtPage">
            <iframe ref="iframe"
                    id="mainIframe"
                    name="mainIframe"
                    style="width:100%;height: 1080px"
                    :src="'http://localhost:8090/byzt/client_view.html?stageId='+stageList[stageIndex].stageId+'&d='+theTime"
                    frameborder="0"
                    scrolling="no"></iframe>
        </div>

    mounted() {
        let mapFrame = this.$refs.iframe
        if (mapFrame.attachEvent){  //兼容浏览器判断
                mapFrame.attachEvent("onload", function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的数据'
                    },'*')
                })
            }else { 
                mapFrame.onload = function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的数据'
                    },'*')
                } 
            }

    },

iframe中

window.addEventListener('message',function(e){
    console.log('e',e.data)
    // 数据保存在 data中
})