如何将第三方系统页面嵌入到苍穹平台系统里

关键词：iframe、第三方、前端第三方页面数据交互、postMessage

一、需求

 1、客户需求想把原有其他系统的功能直接嵌入到金蝶苍穹平台做的系统里

 2、苍穹页面向第三方系统页面发送消息

 3、第三方系统页面向苍穹页面发送消息

二、思路与方案

 通过设计器中的iframe控件，把第三方系统页面嵌入到苍穹

三、实现过程

 1、新建一个动态表单（kdec_iframe_wfb02），添加iframe控件：

图1

2、本地创建一个springboot项目，并添加index.html页面

图2

3、添加动态表单插件，设置iframe的url属性：

    @Override
    public void afterCreateNewData(EventObject e) {
        super.afterCreateNewData(e);
        IFrame iframe = this.getView().getControl("kdec_iframeap");
        // 设置url，苍穹开发者门户
        String url = "http://192.168.5.54:9090/index.html";
        iframe.setSrc(url);
    }

4、苍穹页面向第三方页面发送/接收消息：

    @Override
    public void registerListener(EventObject e) {
        super.registerListener(e);
        //添加按钮监听
        Button button = this.getView().getControl("kdec_buttonap");
        button.addClickListener(this);
    }
    @Override
    public void click(EventObject evt) {
        super.click(evt);
        Object source = evt.getSource();
        if(source instanceof Button){
            Button button = (Button) source;
            String key = button.getKey();
            //页面点击”向第三方发送“按钮向第三方发送消息
            if(StringUtils.equals("kdec_buttonap",key)){
                Object kdec_textfield = this.getModel().getValue("kdec_textfield");
                IFrame iframe = this.getView().getControl("kdec_iframeap");
                IFrameMessage message = new IFrameMessage();
                message.setContent(kdec_textfield);
                iframe.postMessage(message);
            }
        }
    }
    
    //接收第三方消息
    @Override
    public vo