iframe 與父元素或子元素傳遞參數

iframe 向父窗口

window.parent.postMessage('向父窗口傳的值'，*);

 

父窗口向 iframe 內部子窗口傳值

// 原生
<iframe src="iframeSrc" frameborder="0" width="100%" height="100%"></iframe>
documnet.querySelector('iframe').contentWindow.postMessage('向iframe傳的值'，*);

// vue
<iframe ref="h5CourseWare" :src="iframeSrc" frameborder="0" width="100%" height="100%"></iframe>
this.$refs.h5CourseWare.contentWindow.postMessage('向iframe傳的值'， '*')

 

接受信息

window.addEventList('message',  (e) => {
    console.log(e.data);
});

 

如果執行 e.data 不存在

window.addEventList('message',  (e) => {
　　try{
　　　　if (e.data type e.data ==='string' ) {　
　　　　　　console.log(e.data);

        }

    } catch (err) {

        console.log(err)

    }

});