美文网首页
vue iframe子页面–父级页面间方法调用

vue iframe子页面–父级页面间方法调用

作者: 不想明明 | 来源:发表于2019-09-27 14:12 被阅读0次

    (1)子页面调用父页面的方法

    父页面
    created() {
      var _this = this
      //这里可放到全局,提供给子 iframe 调用
      window.addTab = function(obj){
        return TabUtil().addTab(obj)
      }
    }
    
    子页面调用
    window.parent.addTab(obj)
    

    (2)父页面调用子页面的方法

    子页面
    created() {
         var _this = this
         //这里可放到全局
         window.resizeWindow = function() {
            return _this.resizeWindow()
        }
    },
    methods: {
        //窗口变化处理
        resizeWindow () {
          console.log('页面在变化')
        }
    }
    
    父页面调用
    var iframe_home = document.querySelector('#iframe_home')
    iframe_home.contentWindow.resizeWindow()
    

    iframe_home : iframe标签id

    (3)子页面获取父页面对象

    var parent = window.parent.document.querySelector('#mask-div')
    

    (4)父页面获取子页面对象

    var iframe = document.querySelector('#iframe_home')
    var children = iframe.contentWindow.document.querySelector('#children')
    

    相关文章

      网友评论

          本文标题:vue iframe子页面–父级页面间方法调用

          本文链接:https://www.haomeiwen.com/subject/satauctx.html