遇到个难题需要跨域刷新iframe,用 postMessage 传递数据解决
方法类似与 vue 父子组件传值
解决方法如下:
一:vue3方式
// 刷新appIframe
//父页面,appIframeReload 刷新按钮事件,自定义按钮事件
setup(){
const appIframeReload = () => {
const frame = document.getElementsById('iframe'); //获取iframe
setTimeout(() => {
frame.contentWindow.postMessage(200, "*") //传递数据给子页面
}
}, 300)
}
return {
appIframeReload
};
}
//子页面 的APP.vue mouterd 事件写这些方法
mounted(){
if (typeof window.addEventListener != 'undefined') { // for ie9+、chrome
window.addEventListener('message', dealMessage, false);
} else if (typeof window.attachEvent != 'undefined') { // for ie8-
window.attachEvent('onmessage', dealMessage);
}
function dealMessage (e) {
//传过来的值是200,触发局部刷新
if (e.data == 200) {
e.currentTarget.window.location.reload()
}
}
}
}
二:vue2方式
//父页面,appIframeReload 刷新按钮事件,自定义按钮事件
methods:{
appIframeReload () {
const frame = document.getElementsById('iframe'); //获取iframe
setTimeout(() => {
frame.contentWindow.postMessage(200, "*") //传递数据给子页面
}
}, 300)
}
}
//子页面 的APP.vue mounted事件写这些方法
mounted()
{
if (typeof window.addEventListener != 'undefined') { // for ie9+、chrome
window.addEventListener('message', dealMessage, false);
} else if (typeof window.attachEvent != 'undefined') { // for ie8-
window.attachEvent('onmessage', dealMessage);
}
function dealMessage (e) {
//传过来的值是200,触发局部刷新
if (e.data == 200) {
e.currentTarget.window.location.reload() //触发刷新方法
}
}
}