一、业务需求场景
从vue组件内嵌帆软的iframe地址,点击从帆软页面某条数据,将参数带入本组件的vue代码,触发某事件,打开相应vue页面。
(1)帆软页面某数据
在这里插入图片描述
(2)点击某数据后,触发的vue事件
在这里插入图片描述
二、帆软端配置
在这里插入图片描述
在这里插入图片描述
代码:

window.parent.postMessage({
                        status: 'ok',
                        params: {
                          jhbm: jhbm,
                          gzfxsj: gzfxsj
                        }
                    }, '*');

三、vue组件部分代码

methods: {
    iframePushListener (event) {  // 监听帆软iframe后事件
      if (event.data.status === 'ok') {
        console.log(event.data)  //打印需要从帆软页面带过来的参数
        this.$refs.gzjfrbbForm.init('view', event.data.params.jhbm, event.data.params.gzfxsj)  //需要处理的vue事件
      }
    }
  },
mounted () {
this.$nextTick(() => window.addEventListener('message', this.iframePushListener))  // 监听帆软iframe消息
}
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐