关键词：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 void customEvent(CustomEventArgs e) {
        super.customEvent(e);
        String eventArgs = e.getEventArgs();
        JSONObject jsonObject = JSONObject.parseObject(eventArgs);
        Object content = jsonObject.get("content");
        if(content instanceof Map){
            Map map = (Map) content;
            Object value1 = map.get("value1");
            this.getModel().setValue("kdec_textfield1",value1);
        }
    }

5、第三方页面向苍穹页面发送/接收消息（index.html页面）：

图3

四、效果图

预览：

图4

点击”向第三方发送“按钮：

图5

点击”向苍穹发送“按钮：

图6

五、开发环境版本

不限,本样例采用的轻量级环境,版本是: 苍穹版本号 COSMICV4.0.019.0 星瀚版本号 CONSTELLATIONV4.0.019.0

六、注意事项

1、子页面向父页面发送消息时候，要保证window是苍穹页面对应的window即：window.parent

2、本案例两套系统都是本地环境，不存在跨域问题；

如果不同源iframe嵌套第三方页面，会遇到跨域的问题；因为违反了同源策略就会出现跨域问题，主要表现为以下三方面：

1）无法读取cookie、localStorage、indexDB

2）DOM无法获得

3）ajax请求无法发送

解决的方案有很多可以自行网上查找，这里推荐一种：

通过nginx把苍穹和第三方配置成同源，都是通过同一个ip去访问，再转发到指定服务

2、第三方url禁止访问：

解决参考：https://juejin.cn/post/6844904136601763853

3、iframe通信可以通过postMessage

参考：https://demo.kdcloud.com/devdoc/?nav=fd#/ctrl/commonControl/iframe/

七、参考资料

开发平台

学习成长中心

Iframe控件

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

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

恭喜您！