Vue Iframe跨域 调用方法

子页面传递参数

http://192.168.1.131:9090 很重要 需要设置你发送消息的iframe地址

window.parent.postMessage('e.target.w.id', 'http://192.168.1.131:9090')

父页面接收

window.addEventListener('message',function(e){
	console.log(e.data);
}, false);
window.queryToenName = queryToenName

Nuxt/Vue项目

父页面 挂载方法

mounted() {
    window.$jw = {}
    // 成功后关闭修改密码弹框 来自子iframe页面
    $jw.closeChangePassword = () => {
      this.showPassword = false
    }
}

子页面 点击某个按钮触发

function closeChangePassword() {
    parent.$jw.closeChangePassword()
}

其它 操作iframe中的dom元素

// 打开修改密码弹框
this.showPassword = true
try {   
    document.getElementById('iframePassword').contentWindow.document.querySelector('.header').style.display = 'none'
    document.getElementById('iframePassword').contentWindow.document.querySelector('.footer').style.display = 'none'
} catch {
  console.error('iframe打开失败！');
}

后记

附上MDN链接：link