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:' 我是子页面传给父页面的数据 '} },‘*’)

      }

      

      

      

      

  • 相关阅读:
    知识经济中的贫富差距固定化
    分布式锁
    Activiti
    一种避免在scrollViewDidEndDragging中改变contentInset时闪动的解决方案
    一个封装好的iOS无限滚动组件HXInfiniteScrollView
    使用ReactiveCocoa限制UITextField只能输入正确的金额
    关于ReactiveCocoa的RACObserve的一些研究
    iOS使用masonry快速将一组view在superview中等宽排列
    使用AutoLayOut为UIScrollView添加约束图解及要点
    使用AutoLayOut技术告别UITableViewCell高度计算
  • 原文地址:https://www.cnblogs.com/wangyan0926/p/15238189.html
Copyright © 2011-2022 走看看