iframe子页面和父页面进行交互

• 在做项目的时候遇到这样的情况：有时候需要使用iframe来带入别人写好的代码，这个页面甚至和我们没有在一个服务器上，那么如何发生数据交互。
• iframe加载完毕，需要往父页面传递数据，这个时候很容易遇到获取不到dom的情况，所以我们可以使用自定义事件来解决这个问题

iframe.html页面的代码，普通的js代码

• 给父级的iframe绑定自定义的 loadComplete 事件，然后放入任何你想要的让父元素执行的地方，比如你想要的iframe加载完毕就执行，那就放到window.onload;如果想要点击某个地方执行，那就放入那个按钮的点击事件里。
• 同时我们可以定义一个getParams方法，来给父页面传参
  • func 表示 自定义方法名字，比如我们想要父页面执行完毕，来调用我们页面的某个方法
  • data 给父页面传递的参数

 window.onload = function(){
    let myIframe = top.window.document.querySelector('#myIframe');
    myIframe.dispatchEvent(new Event('loadComplete'));
}
function getParams(callback){
    callback({
        func:'testFn',
        data:{
            name:'小明',
            age:18,
        }
    })
}
function testFn(){
    console.log('testFn')
}

父页面的代码，父页面使用vue语法

<iframe src="iframe.html" id="myIframe"  @loadComplete="loadComplete" ></iframe>
methods: {
    loadComplete() {
      let myIframe = document.querySelector("#myIframe");
      let subwin = myIframe.contentWindow;
      subwin.getParams((res) => {
        console.log(res.data);
        let func = res["func"];
        subwin[func]();
      });
    },
},