前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
1，父子系统之间的通信问题
父系统给子系统传值可通过postMessage方式进行通信,postMessage(“传递的数据”,url)
1.1 父系统给子系统的传值
let iframe = document.getElementById('childFrame');
let o1 = {name:'zs',sex:'男'}
let o2 = JSON.stringify(o1);
iframe.contentWindow.postMessage(o2, 子系统url地址);
1
2
3
4
1.2 子系统获取系父统的传值
window.addEventListener("message", (event)=>{
console.log("通过iframe的postMessage传参了--",event.data)
},false);
1
2
3
event.data就是传递过来的数据
1.3 子系统给父系统发送数据
window.parent.postMessage('传递的数据', url);
1
1.4 获取子系统发送的数据
window.addEventListener('message',function(e){
console.log("获取子页面传递的数据====",e)
console.log(e.data)
//处理自己的逻辑
})
1
2
3
4
5
2，js页面添加鼠标监听等事件案例
2.1 嵌入的第三方系统案例代码如下：
["click", "mouseup", "mousemove", "keyup", "touchend"].forEach(item => {
window.addEventListener(
item,
() => {
this.debounceMove();
},
false
);
});
1
2
3
4
5
6
7
8
9
throttle是js的节流函数，请第三方系统使用自己的节流函数。
1
methods: {
debounceMove: throttle(function () {
if(window.parent){
window.parent.postMessage('传递的数据', 'url地址');
}
}, 1000),
},
1
2
3
4
5
6
7
2.2 父系统获取第三方系统（子系统）的消息
let that = this;
window.addEventListener('message',function(e){
console.log("获取子页面传递的数据====",e)
console.log(e.data)
if(e.data == 'move'){
//处理自己的业务逻辑
}
})
1
2
3
4
5
6
7
8
9
10
11
12
2.3 节流函数的解释：
在某个时间内（比如500ms），某个函数只能被触发一次。
节流的应用场景
（1）监听页面的滚动事件；
（2）鼠标移动事件；
（3）用户频繁点击按钮操作；
（4）游戏中的一些设计；
总之，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；
