這是 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 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的iframe 在 SAP 三款产品中的三个应用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。