vue iframe 嵌套内外页面通信

95岁IT民工

于 2024-09-03 15:28:50 发布

阅读量26

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_68964998/article/details/141863049

版权

1、嵌套内层页面通过postMessage发送消息

//可传递对象 
window.parent.postMessage(
     {action: 'submit',},
 '*');

//也可传递json字符串
 window.parent.postMessage(
    JSON.stringify({
       event: 'design-font',
       param: {
          fontSize: fontSize + 'px',
       },
     }),
  '*');

2、外层页面接收并处理消息

    mounted(){
        window.addEventListener('message', (event) => {
            if (event.data.action == 'submit') {
                // 处理消息，执行相应操作
                console.log('------111');
            }
        });
    },