当前位置：首页 > article >正文

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

article 2024/10/24 11:19:14

前端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）游戏中的一些设计；
总之，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；

查看全文

http://www.kler.cn/news/353183.html