这是杰瑞2021年的第73篇文章，也是王子熙第350篇原创文章公众号。iframe是一种历史悠久的前端技术，可以将另一个HTML页面嵌入到当前的宿主页面中。通过iframe嵌入的每个HTML页面都有自己独立的浏览上下文、会话历史记录和DOM树。虽然iframe如果使用不当可能会造成性能问题和安全隐患，但是它也有它的应用场合，那就是第三方应用页面的复用。因此，即便是在SAP等企业级应用软件的前端开发领域，iframe依然占有一席之地。本文介绍了Jerry工作过的三个SAP产品中iframe的使用场景。SAPCRMWebClientUI——在SAPBSP页面中嵌入SAPUI5SAPCRMWebClientUI诞生于本世纪初，底层基于SAPABAPBSP（BusinessServerPage）。由于历史原因，WebClientUI缺少??对Chart类控件的支持。因此，当SAPCRMWebClientUI需要实现富有表现力的图表展示需求时，采用Iframe嵌入SAPUI5图表应用的方案。毕竟用各种类型的图表来呈现业务分析数据也是SAPUI5应用的强项之一。使用SAPCRM业务角色AnalyticsProfessional登录系统，可以创建SAPHANALiveReport类型的分析报告：SAPHANALiveReport使用SAP在命名空间sap.hba.crm下发布的HANA模型。这些模型定义了报表支持的所有查询参数，哪些参数可以在报表创建向导中选择，并保持默认值。最终创建的报告如下图所示。有经验的WebClientUI开发者一眼就能看出这个界面的开发技术应该不是WebClientUI。我们在SAPCRM中发现，上述页面的WebClientUI应用名称为CRM_ANA_OD_RTC，后缀RTC为RunTimeContainer，运行时容器。打开这个应用页面的HTML源代码，发现页面只是一个外壳（Wrapper）。通过第18行的iframe元素，嵌入了另一个SAPUI5应用程序，其名称可以在第19行的src属性中找到：crm_ana_od_ui5。SAPUI开发技术的演进史可参考Jerry的文章：浅谈SAPUI与SalesforceUI开发。SAPUI服务端和客户端渲染的技术分类可以参考Jerry的文章：SAPUI渲染模式：客户端渲染VS服务端渲染。总结：在SAPCRM的报表展示场景中，hostUI的开发技术是WebClientUI，通过iframe嵌入的UI页面的开发技术是SAPUI5。SAPCloudforCustomer通过Mashup展示第三方页面SAPCloudforCustomerMashup（混搭）体现了产品UI强大的Extensibility特性。通过该技术，可以将第三方应用的接口嵌入到C4C标准页面中，支持宿主页面与嵌入的第三方应用接口之间的数据传输。下图是我通过mashup嵌入到SAPCloudforCustomerLeadsOverview页面的Bing搜索页面。当Overview页面打开时，LeadID通过C4C定义的Mashup模型自动传递到Bing搜索页面，执行并显示搜索结果。当然，开发者可以选择LeadBO上除ID外的其他字段传递给Bing搜索页面。SAPCloudforCustomerMashup的底层技术仍然使用iframe元素嵌入第三方网页。在Chrome开发者工具中找到iframe，通过src属性可以清楚的找到内嵌Bing引擎的url。SAPC4CMashup除了嵌入现成的第三方页面，还可以通过iframe嵌入半成品网页，为合作伙伴提供更多通过二次开发增强SAPC4C标准页面的可能性。我们在SAPC4CMashup编辑页面上选择MashupCategory。这个下拉菜单中的选择决定了我们可以将C4C标准BusinessObjects的哪些字段传递给最终嵌入到C4C标准页面中的自研HTML页面。例如，在上图中，我选择的MashupCategory是Business&Finance，这意味着我可以在我的自定义HTML页面中访问该Category暴露的与当前登录的Employee相关的字段值。下图是我编辑的一个简单的HTML页面的源码，其中第6行的变量sap.byd.ui.mashup.context.system.EmployeeName会在运行时由BO字段的实际值决定，Dr.王杰瑞换人。嵌入的自定义HTML字段和运行时对应的iframe元素如下图所示：总结：在SAPCloudforCustomer通过Mashup增强标准UI的使用场景中，增强C4CUI的开发技术为SAPUI5。嵌入式第三方接口可以使用任何前端技术开发，这些技术栈对C4C主机UI是完全透明的。更多Mashup在SAPCloudforCustomer中的使用场景可以参考Jerry之前的文章：如何在SAPCloudforCustomer页面UI上嵌入自定义UISAPAnalyticsCloud和SAPCloudforCustomer集成的SAP电商云SmartEdit和SAPSpartacus集成SAPSmartEdit是一个Web应用程序，它以所见即所得的方式管理SAPeCommerceCloud店面内容。更多关于SAPSmartEdit的介绍，请参考Jerry的视频。下图是Spartacus电商云的SpartacusUI首页。在本地运行时，打开的商店是示例数据中包含的PowertoolsSite：在BackofficeWebsite配置界面，将其WCMSCockpitPreviewURL设置为http://localhost:4299/powerto...：然后访问SAPSmartEditurl:https://localhost:9002/smarte...!/storefront从下拉菜单中选择我们要使用SAPSmartEdit编辑的SAP电子商务云店面：等到SAPSpartacus页面呈现后SAPSmartEditPreview面板，可以在这里对当前打开的店面进行可视化修改：比如新增一个CMSFlexComponent，然后在Spartacus应用中创建并实现CMSComponent对应的AngularComponent，实现创建SAPe-商务云自定义UI。各种SAP产品的自定义UI创建和集成方法概述。当我们在Chrome开发者工具中打开SAPSmartEdit时，发现与本文介绍的前两个使用场景类似，SAPSpartacusUI也通过iframe嵌入到SAPSmartEditPreview面板中。iframe元素的src由两部分组成：http://localhost:4299/powerto...上图中红色高亮显示的前半部分维护在前面介绍的SAPCommerceCloudBackofficeWCMSWebsite配置界面中。后半部分是SAPCommerceCloud后台动态生成的cmsTicketId字段，作为SAPSmartEdit和SAPSpartacus集成的合约，通知Spartacus当前工作在Preview模式。摘要水能载舟，亦能覆舟。任何技术之所以诞生于世，必然有其适用的场合和可以解决的业务痛点。因此，我认为无论使用场合都断言“IRAMEISEVIL”过于绝对。对于本文介绍的三种使用场景，如果选择iframe以外的其他技术，能否达到同样的需求？我个人觉得比较难。即使可以实现，与使用iframe方式相比，工作量和成本又如何呢？希望本文能帮助大家对iframe在SAP产品前端开发中的使用场景有一个基本的了解。感谢您阅读。Jerry的SAPE-CommerceCloudSpartacusUI开发宝典从一个实际例子出发，聊聊SAPCommerceCloud电商云的UI自定义开发，SAPCommerceCloud（电商云）UI的懒加载功能，SAPCRMFioriapplication和SAPCommerceCloud（电商云）UI如何通过调整CSS来改变UI显示风格SAPCommerceCloud（电商）的实现体现了与SAP产品一致的UI增强思想云）用户界面增强。一小时本地搭建SAPCommerceCloud（电商云）的前后端运行环境SAPCommerceCloud（电商云）自定义配置和开发路由路径SAPUI渲染方式：客户端渲染VS服务器端渲染响应式编程是SAP标准产品UI开发中的一种实践SAPCommerceCloudUI用户会话管理Jerry的SAPUI开发概述文章合集SAPUI与SalesforceUI开发谈谈与SAP产品一致的UI增强思路，体现在增强SAPCommerceCloud（电商云）的实现SAP标准响应式编程产品UI开发实践浅谈SAP产品UI开发中组件的概念浅谈搜索引擎优化SEO-SearchEngineOptimizationofSAPproductUI浅谈消息展示机制关于SAP产品UI的SAP产品UI中容器组件的概念及开发SAP产品一览FieldExtensibilitySAPCloudforCustomerExtensibility的设计与实现更多Jerry原创文章在这里：《汪子熙》：
