这是 Jerry 2021 年的第 73 篇文章，也是汪子熙公众号总共第 350 篇原创文章。

iframe 是一项历史悠久的前端技术，可能将另一个 HTML 页面嵌入到以后的宿主页面。每个通过 iframe 被嵌入的 HTML 页面都领有本人独立的浏览上下文，会话历史记录和 DOM 树。尽管 iframe 如果使用不当，可能会引发性能问题和安全隐患，然而它也有其利用场合，即复用第三方利用页面。因而，即使在 SAP 这种企业级应用软件的前端开发畛域，iframe 依然有其一席之地。

本文介绍 Jerry 已经工作过的三款 SAP 产品中 iframe 的应用场景。

SAP CRM WebClient UI – SAP BSP 页面中嵌入 SAP UI5 利用

SAP CRM WebClient UI 诞生于本世纪初，底层基于 SAP ABAP BSP(Business Server Page). 因为历史起因，WebClient UI 不足对 Chart 类控件的反对。因而，在 SAP CRM WebClient UI 须要实现表现力丰盛的图表展现需要时，应用了 Iframe 嵌入 SAP UI5 图表利用的解决方案。毕竟，利用多种类型的图表出现业务剖析类数据，也是 SAP UI5 利用的强项之一。

应用 SAP CRM 业务角色 Analytics Professional 登录零碎，能够创立 SAP HANA Live Report 这种类型的剖析报表：

SAP HANA Live Report，应用了来自 SAP 公布的位于命名空间 sap.hba.crm 下的 HANA 模型。这些模型定义了报表反对的所有查问参数，在报表创立向导里能够抉择应用哪些参数，以及保护默认值。

最初创立出的报表显示如下图所示。有教训的 WebClient UI 开发人员，能够一眼看出，这个界面的开发技术应该并非 WebClient UI.

咱们在 SAP CRM 里找到上图页面的 WebClient UI 利用名称为 CRM_ANA_OD_RTC, 后缀 RTC 即 Run Time Container，运行时容器。关上这个利用页面的 HTML 源代码，发现该页面只是一个壳 (Wrapper)，通过第 18 行的 iframe 元素，嵌入了另一个 SAP UI5 利用，其名称在第 19 行的 src 属性里可能找到：crm_ana_od_ui5.

对于 SAP UI 开发技术的演进历史，参考 Jerry 的文章：

SAP UI 和 Salesforce UI 开发漫谈 。

对于 SAP UI 服务器端和客户端渲染的技术分类，参考 Jerry 的文章：

SAP UI 渲染模式：客户端渲染 VS 服务器端渲染 。

总结：在 SAP CRM 这个报表展现场景里，宿主 UI 的开发技术是 WebClient UI，通过 iframe 被嵌入的 UI 页面的开发技术是 SAP UI5.

SAP Cloud for Customer 通过 Mashup 显示第三方页面

SAP Cloud for Customer Mashup(混搭) 体现了该产品 UI 弱小的 Extensibility 个性，通过该技术能将第三方利用的界面嵌入到 C4C 规范页面里，并反对宿主页面和被嵌入的第三方利用界面之间的数据传递。

下图是我在 SAP Cloud for Customer Leads Overview 页面通过 Mashup 嵌入的 Bing 搜寻页面。当该 Overview 页面关上时，Lead ID 通过 C4C 定义的 Mashup 模型，主动被传递到 Bing 搜寻页面，执行并显示搜寻后果。当然，开发人员能够抉择 Lead BO 上除了 ID 之外的其余字段，传递到 Bing 搜寻页面中去。

SAP Cloud for Customer Mashup 技术底层依然采纳了 iframe 元素来嵌入第三方网页。在 Chrome 开发者工具里找到 iframe，通过 src 属性能分明地发现被嵌入的 Bing 引擎 的 url.

除了嵌入现成的第三方页面之外，SAP C4C Mashup 还能够通过 iframe 嵌入网页的半成品，从而给合作伙伴提供了更多通过二次开发对 SAP C4C 规范页面进行加强的可能性。

咱们在 SAP C4C Mashup 编辑页面里抉择 Mashup Category，这个下拉菜单里的抉择，决定了咱们能够将 C4C 哪些规范 Business Objects 的哪些字段，传递给最终会被嵌入到 C4C 规范页面的自开发 HTML 页面里。

比方上图我抉择的 Mashup Category 为 Business & Finance, 这意味着我能够在我自定义的 HTML 页面里，拜访该 Category 暴露出的和以后登录的 Employee 相干的字段值。

下图是我编辑的一个简略的 HTML 页面的源代码，其中第 6 行变量 sap.byd.ui.mashup.context.system.EmployeeName, 运行时会被该 BO 字段的理论值，Dr. Wang Jerry 所替换。

运行时被嵌入的自定义 HTML 字段以及对应的 iframe 元素如下图所示：

总结：在 SAP Cloud for Customer 通过 Mashup 对规范 UI 进行加强的应用场景里，被加强的 C4C UI 的开发技术是 SAP UI5，而被嵌入的第三方界面，能够采取任何前端技术开发，这些技术栈对于 C4C 宿主 UI 来说齐全通明。

对于 Mashup 在 SAP Cloud for Customer 中的更多应用场景，请参考 Jerry 之前的文章：

• 如何在 SAP Cloud for Customer 页面嵌入自定义 UI
• SAP Analytics Cloud 和 SAP Cloud for Customer 的集成

SAP 电商云 Smart Edit 和 SAP Spartacus UI 的集成

SAP Smart Edit 是一个能以所见即所得形式治理 SAP 电商云店面内容的 Web 应用程序。

对于 SAP Smart Edit 的更多介绍，请参考 Jerry 这个视频。

下图是 Spartacus 电商云 Spartacus UI 首页，在本地运行时，关上的店铺为 sample 数据里自带的 Powertools Site：

在 Backoffice Website 配置界面里，将其 WCMS Cockpit Preview URL 设置成 http://localhost:4299/powerto…：

而后拜访 SAP Smart Edit url：

https://localhost:9002/smarte…!/storefront

从下拉菜单里抉择咱们想应用 SAP Smart Edit 进行编辑的 SAP 电商云店面：

等到 SAP Spartacus 页面在 SAP Smart Edit Preview 面板下渲染结束后，就能够在此直观地对以后关上的店面进行批改了：

比方增加一个新的 CMS Flex Component，而后到 Spartacus 利用里为该 CMS Component 创立并实现对应的 Angular Component，以实现创立 SAP 电商云自定义 UI 的需要。

各种 SAP 产品的自定义 UI 创立和集成办法一览 。

当咱们在 Chrome 开发者工具里关上 SAP Smart Edit 时，发现同本文介绍的前两个应用场景相似，SAP Spartacus UI 也是通过 iframe 的形式，被嵌入到 SAP Smart Edit Preview 面板外部。

iframe 元素的 src 由两局部组成：

http://localhost:4299/powerto…

上图红色高亮的前半部分，在之前介绍的 SAP Commerce Cloud Backoffice WCMS Website 配置界面里保护。后半局部蕴含了 SAP Commerce Cloud 后盾动静生成的 cmsTicketId 字段，作为 SAP Smart Edit 和 SAP Spartacus 集成的一个 Contract，告诉 Spartacus 以后应该工作在 Preview 模式。

总结

水能载舟，亦能覆舟。任何一门技术之所以诞生在世上，必然有其实用场合以及可能解决的业务痛点。因而，抛开应用场合而断言“IRAME IS EVIL”, 我认为太过相对。

本文介绍的三个应用场景，如果抉择 iframe 之外的其余技术，是否实现同样的需要呢？我集体感觉比拟艰难。即便能实现，付出的工作量和代价，同应用 iframe 办法相比又如何呢？

心愿本文能帮忙大家对于 iframe 在 SAP 产品前端开发中的应用场景有一个最根本的理解，感激浏览。

Jerry 的 SAP 电商云 Spartacus UI 开发合集

• 从一个理论的例子登程，谈谈 SAP Commerce Cloud 电商云的 UI 自定义开发
• SAP Commerce Cloud (电商云) UI 的懒加载性能
• SAP CRM Fiori 利用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来扭转 UI 显示格调
• SAP 产品一脉相承的 UI 加强思路，在 SAP Commerce Cloud(电商云) UI 加强实现中的体现
• 一小时外在本地搭建 SAP Commerce Cloud(电商云) 的前后台运行环境
• SAP Commerce Cloud (电商云) 路由门路的自定义配置与开发
• SAP UI 渲染模式：客户端渲染 VS 服务器端渲染
• 响应式编程在 SAP 规范产品 UI 开发中的一个实际
• SAP Commerce Cloud UI 的用户会话治理

Jerry 的 SAP UI 开发综述文章合集

• SAP UI 和 Salesforce UI 开发漫谈
• SAP 产品一脉相承的 UI 加强思路，在 SAP Commerce Cloud(电商云) UI 加强实现中的体现
• 响应式编程在 SAP 规范产品 UI 开发中的一个实际
• 谈谈 SAP 产品 UI 开发中的组件概念
• 对于 SAP 产品 UI 的搜索引擎优化 SEO – Search Engine Optimization
• 聊聊 SAP 产品 UI 上的音讯显示机制
• SAP 产品 UI 里的容器组件的概念和开发概述
• SAP 产品的 Field Extensibility
• SAP Cloud for Customer Extensibility 的设计与实现

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: