zoukankan      html  css  js  c++  java
  • vue中iframe结合window.postMessage实现父子页面间的通信

    在一个项目的页面中使用iframe嵌入另一个项目的页面,需要实现父子,子父页面的通信

    一、语法

             otherWindow.postMessage( message , targetOrigin )

    1. otherWindow 其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
    2. message 将要发送到其他window的数据。
    3. targetOrigin 是限定消息接收范围(域名设置),不限制使用 '*’。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送,只有三者完全匹配,消息才会被发送。

    二、传值

    1.父页面 向 子页面 传值

      // 父页面代码

      sendMessage(){

        this.$refs.iframe.contentWindow.postMessage(' 我是父页面传给子页面的数据 ' ,‘*’);

        // this.$refs.iframe.contentWindow.postMessage({ data:{code:'success',test:' 我是父页面传给子页面的数据 '} },‘*’)

      }

      // 子页面代码 

      methods:{

        handleMessage(event){

          const data = event.data.data;

          if(data.code == 'success'){

            console.log(data.test);

          }

        }

      },

      mounted(){

        window.addEventListener('message', this.handleMessage)

      }

    2.子页面 向 父页面 传值

      // 父页面代码

      methods:{

        handleMessage(event){

          const data = event.data.data;

          if(data.code == 'success'){

            console.log(data.test);

          }

        }

      },

      mounted(){

        window.addEventListener('message', this.handleMessage)

      }

           // 子页面代码

      submit(){

        this.$refs.iframe.contentWindow.postMessage({ data:{code:'success',test:' 我是子页面传给父页面的数据 '} },‘*’)

      }

      

      

      

      

  • 相关阅读:
    判别式模型与生成式模型
    C#和Excel进行报表开发
    C# TreeView序列化、串行化、反序列化
    磁盘碎片整理后电脑盘损坏的修复过程
    用C#实现CS模式下软件自动在线升级
    win10家庭版更改为企业版和激活
    [原创]前端页面检查神器google chrome lighthouse
    [原创] PDMReaderSetup下载
    SpringBoot定时任务@EnableScheduling
    【spring bean】@Resource注解的自动注入策略 , 以 项目中注入多个线程池的Bean为例 附加自定义SpringBeanSupport
  • 原文地址:https://www.cnblogs.com/wangyan0926/p/15238189.html
Copyright © 2011-2022 走看看