美文网首页
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