前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信

前端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 子系统获取系父统的传值

    window.addEventListener("message", (event)=>{  console.log("通过iframe的postMessage传参了--",event.data)},false); 

event.data就是传递过来的数据

1.3 子系统给父系统发送数据

 window.parent.postMessage('传递的数据', url);

1.4 获取子系统发送的数据

window.addEventListener('message',function(e){console.log("获取子页面传递的数据====",e)console.log(e.data)//处理自己的逻辑})

2，js页面添加鼠标监听等事件案例

2.1 嵌入的第三方系统案例代码如下：

  ["click", "mouseup", "mousemove", "keyup", "touchend"].forEach(item => {window.addEventListener(item,() => {this.debounceMove();},false);});

throttle是js的节流函数，请第三方系统使用自己的节流函数。

 methods: {debounceMove: throttle(function () {if(window.parent){window.parent.postMessage('传递的数据', 'url地址');}}, 1000),},

2.2 父系统获取第三方系统（子系统）的消息

let that = this;window.addEventListener('message',function(e){console.log("获取子页面传递的数据====",e)console.log(e.data)if(e.data == 'move'){//结束倒计时that.$bus.$emit('setCountDownTime',60);}})

2.3 节流函数的解释：
在某个时间内（比如500ms），某个函数只能被触发一次。

节流的应用场景
（1）监听页面的滚动事件；
（2）鼠标移动事件；
（3）用户频繁点击按钮操作；
（4）游戏中的一些设计；
总之，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；