• iframe 跨域传值


    <iframe :src="iframesrc" id="myIframe" ref="myIframe" width="100%" :height="myIframeHeight" frameborder="0" :onload="autoHeight()"></iframe>
    A页面
    export default {
        data() {
          return {
            myIframeSrc:undefined,
            myIframeHeight: 50,
                myIframeSrc: "",
                temHeight:0,
          }
        },
        computed:{
          iframesrc:function(){
          //let iframesrc = "http://localhost:9524/tmp-screen/index.html"
          let iframesrc = window.location.protocol+'//'+window.location.host+'/tmp-screen/index.html';
          return iframesrc
          }
        },
        watch: {
          myIframeHeight(newValue, oldValue) {
           // console.log(newValue, oldValue,"A页面——————————————————————————-")
            this.myIframeHeight = newValue
          },
        },
        created() {
            // 得到B传来的值 
            window.addEventListener('message', function (e) {
                
                this.temHeight = e.data
                this.myIframeHeight = e.data
               // console.log("B DOM的高度", this.myIframeHeight)
                document.getElementById('myIframe').height=this.myIframeHeight+"px"
            }, false);
            // 监听A页面的事件,发送给B
            window.addEventListener('scroll', function () {
                let iframe = document.getElementById('myIframe');
                if (!iframe) {
                    return;
                }
                // 下拉距离
                let scrollTop = window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop ||
                    0;
                // 窗口高度
                let windowHeight = window.innerHeight ||
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
                let json = {
                    scrollTop: scrollTop,
                    windowHeight: windowHeight,
                };
                iframe.contentWindow.postMessage(json, '*');
            });
        },
        
      }
    

      B页面

    data() {
            return {
            Bdata:-1,
    
            }
        },
       mounted() {
            // 获取到B页面的值,发送给A
            let _this = this
            let b_pageH = document.getElementById('app').scrollHeight;
            this.Bdata = b_pageH;
        
            window.parent.postMessage(this.Bdata, '*');
            // 得到A页面的值
            window.addEventListener('message', function (e) {
             //   console.log("e.data.scrollTop", e.data.scrollTop)
              //  console.log("e.data.windowHeight", e.data.windowHeight)
            }, false);
    
            window.addEventListener("load", function () {
                 let b_pageH = document.getElementById('app').scrollHeight;
                 window.parent.postMessage(b_pageH, '*');
              
            });
        }
    

      

  • 相关阅读:
    DBA操作规范
    MySQL高可用之MHA
    Get MySQL这5个优化技巧,你将如虎添翼
    数据库的那些事
    Kubernetes
    nginx错误分析 `104: Connection reset by peer`
    kubernets资源预留
    kubernetes Pod亲和性
    kubernetes cpu限制参数说明
    zabbix 面板graph图上没有数据显示
  • 原文地址:https://www.cnblogs.com/wqing/p/12102058.html
Copyright © 2020-2023  润新知