当前应用场景：u3d和前端项目对接，需要使用到前端的设置页面和详情功能，需要操作前端项目的方法，比如打开vue项目的弹窗，修改详情的数据等操作，当前记录的是修改vue页面的数据操作。vue项目使用技术：vue和less编写样式，html页面使用技术：html5和javascript
使用方案：postMessage的方法
vue向iframe发送数据的方法：
sendMessage(data) {
//子向父发送数据
window.parent.postMessage(
{
data: data,
},
"*"
);iframe接收vue数据的方法：
window.addEventListener('message',function(event){
//父接收子数据
// 数据在event.data对象中
console.log(event.data,222)
})iframe向vue发送数据的方法：
var btn = document.getElementById("btn")
btn.onclick = function(){
// 父向子发送数据
let frame = document.getElementById('child'); // 或者用vue语法 let frame = this.$refs.iframeId
frame.contentWindow.postMessage({
name:'i am a father'
},'*');
}vue页面监听iframe发来的数据：
window.addEventListener("message", this.testsend, false);
testsend(event) {
if (event.data.name == "i am a father") {
//vue事件
this.xiugai();
}
},完整代码：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
最低0.47元/天 解锁文章
2683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
