這是 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/powertools-spa：
然後通路 SAP Smart Edit url：
https://localhost:9002/smartedit/#!/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/powertools-spa/cx-preview?cmsTicketId=647870574925284848f12300-7491-4c2f-bed4-405545e1b0fb
上圖紅色高亮的前半部分，在之前介紹的 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 産品 UI 的搜尋引擎優化 SEO - Search Engine Optimization
聊聊 SAP 産品 UI 上的消息顯示機制
SAP 産品 UI 裡的容器元件的概念和開發概述
SAP産品的Field Extensibility
SAP Cloud for Customer Extensibility的設計與實作