父页面:

        1. HTML部分(先创建按钮写一个方法)

<button onclick="geteList()">获取数据</button>

        2. JS部分(这里是获取到子页面,在给子页面传类型获取子页面指定的方法)

function geteList() {
  var win = document.getElementById('iframeId').contentWindow
  win.postMessage({ type: 8 }, '*')
}

 

         3.JS部分(这里监听子页面方法返回的参数)(注意:VUE的话将此方法写在mounted里边,如果是多次调取此方法的话,就换成window.onmessage=(e)=>{}

window.addEventListener('message', function (event) {
  console.log(event.data)
});

 子页面:

        1. 写一个传给父页面的方法。

getHiddenList() {
  this.$refs.generateForm.getData().then(res => {
    var newList = {}
    newList.data = res
    newList.type = 8
    window.parent.postMessage(newList, '*')
  })
},

        2. 监听父页面传过来的参数来判断调取哪个方法

window.addEventListener('message', function (e) {
    if (e.data.type === 1) {
        this.getHiddenList()
    }
}, false);

以上就是 iframe父页面调用子页面方法,并且获取数据(无跨域)最难部分就是跨越了。  一定要注意:父子页面两边都要监听,子页面监听父页面传过来的参数,再根据参数判断调取哪个方法。父页面监听子页面传过来的数据。

Logo

前往低代码交流专区

更多推荐