关于苍穹组件之iframe传参交互原创
金蝶云社区-DC_W
DC_W
17人赞赏了该文章 2,863次浏览 未经作者许可,禁止转载编辑于2021年12月31日 11:33:45

本案例基于VUE3作为前端,实现苍穹内嵌入自定义页面实现。


众所周知,苍穹iframe控件使用:

@Override
public void afterCreateNewData(EventObject e) {
    IFrame iframe = this.getView().getControl([iframe控件标识]);
    iframe.setSrc([目标url]);
}


如何让插件接收来自iframe内页面传递过来的参数?只需要实现FormPlugin内的customEvent(CustomEventArgs e)方法,在收到参数时会自动调用该方法,参考写法:


@Override
public void customEvent(CustomEventArgs e) {
    String key = e.getKey();//自定义控件标识
    String args = e.getEventArgs();//数据
    String ename = e.getEventName();//事件名称:这里默认是invokeCustomEvent
    this.getView().showSuccessNotification(key+":"+args+":"+ename);
}


苍穹接收部分已写好了,让我们来看看自定义页面部分如何发起接收\传递参数(其他框架语言同理,都是实现:window.parent.postMessage 方法和window.addEventListener监听器)


<template>

    <Button @click="sendMsgs">发送</Button>
</template>


<script lang="ts" setup>

    
     //接受来自上级窗口的postMessage
      window.addEventListener('message', function (event) {
        console.log(event.data);
      });


    //注意这里是重点,需要获取上级窗口的pageId,作为参数之一传入,否则苍穹无法判断对应哪个页面

    let pageId = HttpUtils.getQueryParams(window.location.href)['pageId'];

    const sendMsgs = () => {
        window.parent.postMessage({
        pageId: pageId, //该字段是苍穹专用
        type: 'invokeCustomEvent',
        content: {
          msg: 'this is my message',
          methodName: 'other',
          color: 'blask',
        },
      },
      '*',
    );
  };
</script>


最后,还有在苍穹插件中传递参数方法:

 @Override
 public void click(EventObject evt) {
    IFrameMessage message = new IFrameMessage();
    message.setContent("this is content");
    message.setType("mytype");
    IFrame iframe = this.getView().getControl([iframe标识]);
    iframe.postMessage(message);
}


这里,就实现了双向收发了。当然,可以在message中设置更多内容,比如origin等。如果遇到问题欢迎留言交流。


原创不易,如果帮助到您请一键三联~

图标赞 17
17人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!