zoukankan      html  css  js  c++  java
  • vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据:

    <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe>

    父页面发送数据参数:
    <script>
        export default {
            mounted() {
                let mapFrame = this.$refs['mapFrame']
                if (mapFrame.attachEvent){  //兼容浏览器判断
                    mapFrame.attachEvent("onload", function(){ 
                        let iframeWin = mapFrame.contentWindow
                        iframeWin.postMessage(data,'*')
                  //data传递的参数   *写成子页面的域名或者是ip
                    })
                } else { 
                    mapFrame.onload = function(){ 
                        let iframeWin = mapFrame.contentWindow
                        iframeWin.postMessage(data,'*')
                    } 
                }
                
            }
        }
    </script>
                        

    子页面接收参数:

    <script>
      export default{
        mounted(){
          window.addEventListener('message',function(e){               
                console.log(e.origin,e.data)//子页面接收参数
            })  
         }
    
    }
        
    </script>        
  • 相关阅读:
    CentOS7搭建SFTP服务
    MySQL主从异常恢复
    MySQL主从复制配置
    Docker安装MySQL8.0
    CentOS7安装JDK1.8
    RabbitMQ死信队列
    RabbitMQ重试机制
    RabbitMQ消息可靠性传输
    TCP/IP的Socket编程
    c#网络编程使用tcpListener和tcpClient
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/10858374.html
Copyright © 2011-2022 走看看