vue项目中有iframe,如何互相传值
/vue 监听 iframe传过来的值。1、vue 向iframe传值。2、iframe向vue传值。
·
vue项目中有iframe,如何互相传值
1、vue 向iframe传值
//vue:
<iframe
id="template-iframe"
ref="iframe"
src="/iframe/GanttForResourceLoad/index.html"
width="100%"
height="100%"
frameborder="0"
style="min-height: calc(100vh - 127px)"
/>
//方法:
sendMesFroIframe() {
// 向iframe传值
const mapFrame = this.$refs['iframe'];
const iframeWin = mapFrame.contentWindow;
iframeWin.postMessage(
{
value: 'backSuccess',
id: 'vue',
success: true
},
'*'
);
},
//iframe:
//iframe监听vue传过来的值:
// 监听vue页面传递过来的值
window.addEventListener('message', messageEvent=> {
// console.log(messageEvent,'messageEvent---------------')
if(messageEvent.source!=window.parent.window.parent) return;
// console.log('子收到messageEvent:',messageEvent);
console.log('儿子收到vue的数据:',messageEvent.data);
})
2、iframe向vue传值
window.parent.postMessage(obj, '*');
//如果js外面还有一层js,
//window.parent.window.parent.postMessage(obj, '*');
//vue 监听 iframe传过来的值
mounted() {
// 获取并监听iframe传递来的数据
let that = this;
window.addEventListener('message', function (e) {
var res = e.data;
console.log(res, 'iframe传递过来的数据');
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)