二开案例.嵌套网页交互.金蝶云星空系统与嵌套网页进行交互实现的DEMO

栏目：云星空知识作者：金蝶来源：金蝶云社区发布：2024-09-23浏览：3

偶然间扫到个帖子金蝶云星空系统与嵌套网页进行交互实现详解：https://vip.kingdee.com/article/182254，觉得有点意思，但是里面只讲了怎么做，没有实际的案例，效果并不明显，特此写个简单的DEMO分享一下。

1、应用场景：

嵌套网页与金蝶云星空进行数据交互，例如：打开嵌套网页时，传递金蝶云星空的数据给嵌套网页，嵌套网页接收插件传递过来的数据，打开嵌套网页后在嵌套网页中点击一个按钮，再把嵌套网页的数据发送到金蝶云星空系统当中，并且星空系统接收发过来的数据，同时会触发表单插件事件。

2、案例演示：

本案例将演示动态表单嵌套网页，动态表单传递参数到网页内进行展示，网页修改完参数后点击按钮返回给动态表单并弹出消息提示，下面是实现后的效果：

2.1、打开动态表单后，动态表单插件内将参数传递给嵌套网页，嵌套网页对参数进行展示：

2.2、嵌套网页修改参数值，点击按钮，将参数值返回给动态表单，动态表单插件获取值并弹出消息提示：

3、实现步骤：

3.1、BOS设计器创建动态表单，分别拖两个面板控件并设置充满，最里面的面板控件标识此处命名为FPanelWebBrowse：

3.2、编写表单构建插件，修改面板控件的xtype属性：

using System.ComponentModel;
using Kingdee.BOS.Core.DynamicForm.PlugIn;
using Kingdee.BOS.Core.DynamicForm.PlugIn.Args;
using Kingdee.BOS.Util;
 
namespace Running.Sample.PlugIn.BusinessPlugIn.Builder
{
    [Description("嵌套网页的表单构建插件"), HotUpdate]
    public class P20201205WebBrowseBuilder : AbstractDynamicWebFormBuilderPlugIn
    {
        public override void CreateControl(CreateControlEventArgs e)
        {
            //动态表单上面板控件的标识，修改xtype属性。
            if (e.ControlAppearance.Key.EqualsIgnoreCase("FPanelWebBrowse"))
            {
                e.Control["xtype"] = "kdwebbrowser";
            }
        }
    }
}

3.3、编译表单构建插件，并注册到动态表单上的表单构建插件属性：

3.4、编写动态表单插件，设置需要展示的嵌套网页的地址及接收网页传参的相关逻辑：

using System;
using System.ComponentModel;
using System.Web;
using Kingdee.BOS.Core.DynamicForm.PlugIn;
using Kingdee.BOS.Core.DynamicForm.PlugIn.Args;
using Kingdee.BOS.Core.DynamicForm.PlugIn.ControlModel;
using Kingdee.BOS.JSON;
using Kingdee.BOS.ServiceHelper.FileServer;
using Kingdee.BOS.Util;
using Kingdee.BOS;
 
namespace Running.Sample.PlugIn.BusinessPlugIn.DynamicForm
{
    [Description("嵌套网页的动态表单插件"), HotUpdate]
    public class P20201205WebBrowseEdit : AbstractDynamicFormPlugIn
    {
        public override void AfterBindData(EventArgs e)
        {
            string webSiteUrl = FileServerHelper.GetAppSiteOuterNetUrl(this.Context, 
                HttpContext.Current.Request);
            string sourceUrl = string.Format(@"{0}html5/TestWebBrowse.html?pageid={1}&content={2}",
                webSiteUrl, this.View.PageId, HttpUtility.UrlEncode("这是动态表单传递的参数！"));
 
            //拿到面板控件，设置需要展示的嵌套网页地址，参数通过url传参。
            Control webBrowse = this.View.GetControl("FPanelWebBrowse");
            webBrowse.SetCustomPropertyValue("Source", sourceUrl);
            webBrowse.SetCustomPropertyValue("IsSetBrowseVisible", true);
            webBrowse.SetCustomPropertyValue("Allowfullscreen", true);
 
            //兼容GUI。
            if (this.View.Context.ClientType != ClientType.Silverlight 
                && this.View.Context.ClientType != ClientType.Html)
            {
                webBrowse.InvokeControlMethod("StartTime", 1);
            }
            this.View.AddAction("notShowMainFormHolder", true);
        }
 
        public override void CustomEvents(CustomEventsArgs e)
        {
            //判断是嵌套网页发起的自定义事件，才执行相关逻辑。
            if (e.EventName.EqualsIgnoreCase("$$MessageCustomerEvent"))
            {
                //拿到嵌套网页传递过来的JSON数据。
                JSONObject data = JSONObject.Parse(e.EventArgs);
                string content = data.GetValue("content", string.Empty);
                this.View.ShowMessage(content);
 
                //消息提示完隐藏WebBrowse，兼容WPF。
                Control webBrowse = this.View.GetControl("FPanelWebBrowse");
                webBrowse.SetCustomPropertyValue("IsBrowserVisible", false);
            }
        }
    }
}

3.5、编译动态表单插件，并注册到动态表单上的表单插件属性：

3.6、编写嵌套网页，并部署到应用服务器站点目录下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="script/thirdpart/jquery/jquery.min.js"></script>
    <script>
        (function () {
            var formatOrigin = (function () {
                var reg = /^([\w]+?:\/\/.*?(?=\/|$))/i;
                return function (origin) {
                    origin = origin || '';
                    if (reg.test(origin)) {
                        return RegExp.$1;
                    }
                    return '*';
                };
            })();
            var $postMessage = function (r, data) {
                var t = { _top: window.top, _self: window, _parent: window.parent };
                r = t[r];
                if (!r) return;
                r.postMessage(JSON.stringify(data), formatOrigin("*"));
            };
            window._$postMessage = $postMessage;
        })();
 
        function getpostmessageargs() {
            if (window._$postmessageargs)
                return window._$postmessageargs;
            return "";
        }
        function clearpostmessageargs(param) {
            if (window._$postmessageargs) {
                window._$postmessageargs = "";
            }
        }
    </script>
    <style type="text/css">
        #Text1 {
            width: 200px;
        }
    </style>
</head>
<body>
    <div>
        <h1>这是嵌套网页</h1>
        <h1>这是嵌套网页</h1>
        <h1>这是嵌套网页</h1>
        <input id="Text1" type="text" />
        <input id="Button1" type="button" value="提交" />
    </div>
    <script>
        //定义解析地址参数的方法，用以拿到动态表单传递的地址参数值。
        var getQueryString = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return decodeURIComponent(r[2]);
            return "";
        };
 
        //拿到动态表单传递过来的内容参数，并赋值到文本框上。
        $("#Text1").attr("value", getQueryString("content"));
 
        //注册按钮点击事件。
        $(document).ready(function () {
            $("#Button1").bind('click', function () {
                var n = {};
                n.pageid = getQueryString("pageid"); //赋值动态表单传递过来的pageid值。
                n.putdata = {}; //构建传递给动态表单插件的JSON参数对象。
                n.putdata.content = $("#Text1").val(); //将文本框内容传递回动态表单。
                window._$postmessageargs = JSON.stringify(n);
                window._$postMessage("_top", n);
            });
        });
    </script>
</body>
</html>

3.7、编写表单插件重写按钮点击事件，用以实现点击按钮弹窗动态表单，注册插件：

using System.ComponentModel;
using Kingdee.BOS.Core.Bill.PlugIn;
using Kingdee.BOS.Core.DynamicForm;
using Kingdee.BOS.Core.DynamicForm.PlugIn.Args;
using Kingdee.BOS.Util;
 
namespace Running.Sample.PlugIn.BusinessPlugIn.Bill
{
    [Description("点击按钮，弹出动态表单展示嵌套网页"), HotUpdate]
    public class P20201205ShowWebBrowseEdit : AbstractBillPlugIn
    {
        public override void ButtonClick(ButtonClickEventArgs e)
        {
            DynamicFormShowParameter parm = new DynamicFormShowParameter();
            parm.FormId = "k0a8823be6ca84dd097d28ad2cb686513"; //嵌套网页的动态表单标识。
            parm.OpenStyle.ShowType = ShowType.Modal;
            this.View.ShowForm(parm);
        }
    }
}

3.8、重启IIS，验证效果：

1）WPF端：