iframe父页面调用子页面方法，并且获取数据（无跨域）

父页面：

        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父页面调用子页面方法，并且获取数据（无跨域）最难部分就是跨越了。  一定要注意：父子页面两边都要监听，子页面监听父页面传过来的参数，再根据参数判断调取哪个方法。父页面监听子页面传过来的数据。