iframe 与父元素或子元素传递参数

最新推荐文章于 2024-09-05 21:30:00 发布

转载最新推荐文章于 2024-09-05 21:30:00 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luov/p/9915208.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用window.postMessage方法实现iframe与其父窗口之间的双向通信。包括从iframe向父窗口发送消息，以及父窗口向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)

    }

});

转载于:https://www.cnblogs.com/luov/p/9915208.html