vue页面和ifram之间传值信息交互

方式一：

vue页面

    mounted(){
        window['reData'] = () => { //监听iframe页面调用本vue页面的方法并执行
          this.reData();
        };

        const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象
        this.framObj = obj1
        this.getWaterDate()
    },
    methods:{
      getWaterDate(){ //第一次给iframe页面变量赋值
        let data = {
          damAreaTemperature: "47.5",
        }
        this.framObj.waterTopData = data
      },
      reData(){  //iframe页面调用vue函数再次给iframe页面变量重新赋值
        let data = {
          damAreaTemperature: "47.5",
        }
        this.framObj.waterTopData = data
      }
    }

iframe页面

       
        setWaterTopData()
        //第一次获取vue页面给本页面设置的值并渲染页面
        function setWaterTopData(){
            if(waterTopData){
                let top_tem = $('#top_tem')
                top_tem.html(waterTopData.damAreaTemperature)
            }
        }

        setTimeout(()=>{        //调用vue页面函数更新本页面变量值并渲染页面
            window.parent.reData();
            setWaterTopData()
        },5000)

方式二：H5新属性 postmessage

vue页面

    mounted(){
        const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象
        this.framObj = obj1

        window.addEventListener('message', event =>{ //监听iframe页面传过来的消息并执行方法
          let data = event.data
          switch (data.cmd) {
            case 'getWaterDate' :
              this.getWaterDate()
              break
          }
        })
    },
    methods:{
      getWaterDate(){
        //此方法 发送消息并传参给iframe页面

        this.framObj.postMessage({
          cmd : 'updateWaterData',
          params : {
            damAreaTemperature: "47.5",
          }
        },
        'http://localhost:8088/')
      },
    }

iframe页面

        setTimeout(()=>{ //向vue页面发送消息
            window.parent.postMessage({
                cmd : 'getWaterDate',
            },
            'http://localhost:8088/'
            )
        },5000)

        function setWaterTopData(data){
            let top_tem = $('#top_tem')
            top_tem.html(data.damAreaTemperature)
        }
        //监听vue页面发来的消息并执行相应的函数
        window.addEventListener('message', event =>{
          let data = event.data
          switch (data.cmd) {
            case 'updateWaterData' :
              setWaterTopData(data.params)
              break
          }
        })