青岛商媒做网站怎么样,网站网络服务器是什么情况,怎么开通网站,优化网站的公司前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信 1#xff0c;父子系统之间的通信问题 父系统给子系统传值可通过postMessage方式进行通信,postMessage(“传递的数据”,url)
1.1 父系统给子系统的传值
let iframe document.getElementById(childFrame);
let o1 {…前端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)//处理自己的逻辑})2js页面添加鼠标监听等事件案例
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游戏中的一些设计 总之依然是密集的事件触发但是这次密集事件触发的过程不会等待最后一次才进行函数调用而是会按照一定的频率进行调用
