這是 Jerry 2021 年的第 73 篇文章，也是汪子熙公眾號(hào)總共第 350 篇原創(chuàng)文章。

iframe 是一項(xiàng)歷史悠久的前端技術(shù)，能夠?qū)⒘硪粋€(gè) HTML 頁(yè)面嵌入到當(dāng)前的宿主頁(yè)面。每個(gè)通過 iframe 被嵌入的 HTML 頁(yè)面都擁有自己獨(dú)立的瀏覽上下文，會(huì)話歷史記錄和 DOM 樹。雖然 iframe 如果使用不當(dāng)，可能會(huì)引發(fā)性能問題和安全隱患，但是它也有其應(yīng)用場(chǎng)合，即復(fù)用第三方應(yīng)用頁(yè)面。因此，即便在 SAP 這種企業(yè)級(jí)應(yīng)用軟件的前端開發(fā)領(lǐng)域，iframe 仍然有其一席之地。

本文介紹 Jerry 曾經(jīng)工作過的三款 SAP 產(chǎn)品中 iframe 的使用場(chǎng)景。

SAP CRM WebClient UI - SAP BSP 頁(yè)面中嵌入 SAP UI5 應(yīng)用

SAP CRM WebClient UI 誕生于本世紀(jì)初，底層基于 SAP ABAP BSP(Business Server Page).由于歷史原因，WebClient UI 缺乏對(duì) Chart 類控件的支持。因此，在 SAP CRM WebClient UI 需要實(shí)現(xiàn)表現(xiàn)力豐富的圖表展示需求時(shí)，使用了 Iframe 嵌入 SAP UI5 圖表應(yīng)用的解決方案。畢竟，利用多種類型的圖表呈現(xiàn)業(yè)務(wù)分析類數(shù)據(jù)，也是 SAP UI5 應(yīng)用的強(qiáng)項(xiàng)之一。

使用 SAP CRM 業(yè)務(wù)角色 Analytics Professional 登錄系統(tǒng)，可以創(chuàng)建 SAP HANA Live Report 這種類型的分析報(bào)表：

SAP HANA Live Report，使用了來自 SAP 發(fā)布的位于命名空間 sap.hba.crm 下的 HANA 模型。這些模型定義了報(bào)表支持的所有查詢參數(shù)，在報(bào)表創(chuàng)建向?qū)Ю锟梢赃x擇使用哪些參數(shù)，以及維護(hù)默認(rèn)值。

最后創(chuàng)建出的報(bào)表顯示如下圖所示。有經(jīng)驗(yàn)的 WebClient UI 開發(fā)人員，可以一眼看出，這個(gè)界面的開發(fā)技術(shù)應(yīng)該并非 WebClient UI.

我們?cè)?SAP CRM 里找到上圖頁(yè)面的 WebClient UI 應(yīng)用名稱為 CRM_ANA_OD_RTC, 后綴 RTC 即 Run Time Container，運(yùn)行時(shí)容器。打開這個(gè)應(yīng)用頁(yè)面的 HTML 源代碼，發(fā)現(xiàn)該頁(yè)面只是一個(gè)殼(Wrapper)，通過第 18 行的 iframe 元素，嵌入了另一個(gè) SAP UI5 應(yīng)用，其名稱在第 19 行的 src 屬性里能夠找到：crm_ana_od_ui5.

關(guān)于 SAP UI 開發(fā)技術(shù)的演進(jìn)歷史，參考 Jerry 的文章：

SAP UI 和 Salesforce UI 開發(fā)漫談。

關(guān)于 SAP UI 服務(wù)器端和客戶端渲染的技術(shù)分類，參考 Jerry 的文章：

SAP UI渲染模式：客戶端渲染 VS 服務(wù)器端渲染。

總結(jié)：在 SAP CRM 這個(gè)報(bào)表展示場(chǎng)景里，宿主 UI 的開發(fā)技術(shù)是 WebClient UI，通過 iframe 被嵌入的 UI 頁(yè)面的開發(fā)技術(shù)是 SAP UI5.

SAP Cloud for Customer 通過 Mashup 顯示第三方頁(yè)面

SAP Cloud for Customer Mashup(混搭)體現(xiàn)了該產(chǎn)品 UI 強(qiáng)大的 Extensibility 特性，通過該技術(shù)能將第三方應(yīng)用的界面嵌入到 C4C 標(biāo)準(zhǔn)頁(yè)面里，并支持宿主頁(yè)面和被嵌入的第三方應(yīng)用界面之間的數(shù)據(jù)傳遞。

下圖是我在 SAP Cloud for Customer Leads Overview 頁(yè)面通過 Mashup 嵌入的 Bing 搜索頁(yè)面。當(dāng)該 Overview 頁(yè)面打開時(shí)，Lead ID 通過 C4C 定義的 Mashup 模型，自動(dòng)被傳遞到 Bing 搜索頁(yè)面，執(zhí)行并顯示搜索結(jié)果。當(dāng)然，開發(fā)人員可以選擇 Lead BO 上除了 ID 之外的其他字段，傳遞到 Bing 搜索頁(yè)面中去。

SAP Cloud for Customer Mashup 技術(shù)底層仍然采用了 iframe 元素來嵌入第三方網(wǎng)頁(yè)。在 Chrome 開發(fā)者工具里找到 iframe，通過 src 屬性能清楚地發(fā)現(xiàn)被嵌入的 Bing 引擎 的 url.

除了嵌入現(xiàn)成的第三方頁(yè)面之外，SAP C4C Mashup 還可以通過 iframe 嵌入網(wǎng)頁(yè)的半成品，從而給合作伙伴提供了更多通過二次開發(fā)對(duì) SAP C4C 標(biāo)準(zhǔn)頁(yè)面進(jìn)行增強(qiáng)的可能性。

我們?cè)?SAP C4C Mashup 編輯頁(yè)面里選擇 Mashup Category，這個(gè)下拉菜單里的選擇，決定了我們可以將 C4C 哪些標(biāo)準(zhǔn) Business Objects 的哪些字段，傳遞給最終會(huì)被嵌入到 C4C 標(biāo)準(zhǔn)頁(yè)面的自開發(fā) HTML 頁(yè)面里。

比如上圖我選擇的 Mashup Category 為 Business & Finance, 這意味著我可以在我自定義的 HTML 頁(yè)面里，訪問該 Category 暴露出的和當(dāng)前登錄的 Employee 相關(guān)的字段值。

下圖是我編輯的一個(gè)簡(jiǎn)單的 HTML 頁(yè)面的源代碼，其中第 6 行變量 sap.byd.ui.mashup.context.system.EmployeeName, 運(yùn)行時(shí)會(huì)被該 BO 字段的實(shí)際值，Dr. Wang Jerry 所替換。

運(yùn)行時(shí)被嵌入的自定義 HTML 字段以及對(duì)應(yīng)的 iframe 元素如下圖所示：

總結(jié)：在 SAP Cloud for Customer 通過 Mashup 對(duì)標(biāo)準(zhǔn) UI 進(jìn)行增強(qiáng)的使用場(chǎng)景里，被增強(qiáng)的 C4C UI 的開發(fā)技術(shù)是 SAP UI5，而被嵌入的第三方界面，可以采取任何前端技術(shù)開發(fā)，這些技術(shù)棧對(duì)于 C4C 宿主 UI 來說完全透明。

關(guān)于 Mashup 在 SAP Cloud for Customer 中的更多使用場(chǎng)景，請(qǐng)參考 Jerry 之前的文章：

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

SAP Smart Edit 是一個(gè)能以所見即所得方式管理 SAP 電商云店面內(nèi)容的 Web 應(yīng)用程序。

關(guān)于 SAP Smart Edit 的更多介紹，請(qǐng)參考 Jerry 這個(gè)視頻。

下圖是 Spartacus 電商云 Spartacus UI 首頁(yè)，在本地運(yùn)行時(shí)，打開的店鋪為 sample 數(shù)據(jù)里自帶的 Powertools Site：

在 Backoffice Website 配置界面里，將其 WCMS Cockpit Preview URL 設(shè)置成 http://localhost:4299/powertools-spa：

然后訪問 SAP Smart Edit url：

https://localhost:9002/smartedit/#!/storefront

從下拉菜單里選擇我們想使用 SAP Smart Edit 進(jìn)行編輯的 SAP 電商云店面：

等到 SAP Spartacus 頁(yè)面在 SAP Smart Edit Preview 面板下渲染完畢后，就可以在此直觀地對(duì)當(dāng)前打開的店面進(jìn)行修改了：

比如添加一個(gè)新的 CMS Flex Component，然后到 Spartacus 應(yīng)用里為該 CMS Component 創(chuàng)建并實(shí)現(xiàn)對(duì)應(yīng)的 Angular Component，以實(shí)現(xiàn)創(chuàng)建 SAP 電商云自定義 UI 的需求。

各種 SAP 產(chǎn)品的自定義 UI 創(chuàng)建和集成方法一覽。

當(dāng)我們?cè)?Chrome 開發(fā)者工具里打開 SAP Smart Edit 時(shí)，發(fā)現(xiàn)同本文介紹的前兩個(gè)使用場(chǎng)景類似，SAP Spartacus UI 也是通過 iframe 的方式，被嵌入到 SAP Smart Edit Preview 面板內(nèi)部。

iframe 元素的 src 由兩部分組成：

http://localhost:4299/powertools-spa/cx-preview?cmsTicketId=647870574925284848f12300-7491-4c2f-bed4-405545e1b0fb

上圖紅色高亮的前半部分，在之前介紹的 SAP Commerce Cloud Backoffice WCMS Website 配置界面里維護(hù)。后半部分包含了 SAP Commerce Cloud 后臺(tái)動(dòng)態(tài)生成的 cmsTicketId 字段，作為 SAP Smart Edit 和 SAP Spartacus 集成的一個(gè) Contract，通知 Spartacus 當(dāng)前應(yīng)該工作在 Preview 模式。

總結(jié)

水能載舟，亦能覆舟。任何一門技術(shù)之所以誕生在世上，必定有其適用場(chǎng)合以及能夠解決的業(yè)務(wù)痛點(diǎn)。因此，拋開使用場(chǎng)合而斷言“IRAME IS EVIL”,我認(rèn)為太過絕對(duì)。

本文介紹的三個(gè)使用場(chǎng)景，如果選擇 iframe 之外的其他技術(shù)，能否實(shí)現(xiàn)同樣的需求呢？我個(gè)人覺得比較困難。即使能實(shí)現(xiàn)，付出的工作量和代價(jià)，同使用 iframe 方法相比又如何呢？

希望本文能幫助大家對(duì)于 iframe 在 SAP 產(chǎn)品前端開發(fā)中的使用場(chǎng)景有一個(gè)最基本的了解，感謝閱讀。

Jerry 的 SAP 電商云 Spartacus UI 開發(fā)合集

Jerry 的 SAP UI 開發(fā)綜述文章合集

更多Jerry的原創(chuàng)文章，盡在："汪子熙":