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

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

本文介紹 Jerry 曾經(jīng)工作過的三款 SAP 產(chǎn)品中 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 需要實現(xiàn)表現(xiàn)力豐富的圖表展示需求時，使用了 Iframe 嵌入 SAP UI5 圖表應用的解決方案。畢竟，利用多種類型的圖表呈現(xiàn)業(yè)務分析類數(shù)據(jù)，也是 SAP UI5 應用的強項之一。

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

SAP HANA Live Report，使用了來自 SAP 發(fā)布的位于命名空間 sap.hba.crm 下的 HANA 模型。這些模型定義了報表支持的所有查詢參數(shù)，在報表創(chuàng)建向導里可以選擇使用哪些參數(shù)，以及維護默認值。

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

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

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

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

關于 SAP UI 服務器端和客戶端渲染的技術分類，參考 Jerry 的文章：

SAP UI渲染模式：客戶端渲染 VS 服務器端渲染。

總結：在 SAP CRM 這個報表展示場景里，宿主 UI 的開發(fā)技術是 WebClient UI，通過 iframe 被嵌入的 UI 頁面的開發(fā)技術是 SAP UI5.

SAP Cloud for Customer 通過 Mashup 顯示第三方頁面

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

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

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

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

我們在 SAP C4C Mashup 編輯頁面里選擇 Mashup Category，這個下拉菜單里的選擇，決定了我們可以將 C4C 哪些標準 Business Objects 的哪些字段，傳遞給最終會被嵌入到 C4C 標準頁面的自開發(fā) 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 的開發(fā)技術是 SAP UI5，而被嵌入的第三方界面，可以采取任何前端技術開發(fā)，這些技術棧對于 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 電商云店面內(nèi)容的 Web 應用程序。

關于 SAP Smart Edit 的更多介紹，請參考 Jerry 這個視頻。

下圖是 Spartacus 電商云 Spartacus UI 首頁，在本地運行時，打開的店鋪為 sample 數(shù)據(jù)里自帶的 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 創(chuàng)建并實現(xiàn)對應的 Angular Component，以實現(xiàn)創(chuàng)建 SAP 電商云自定義 UI 的需求。

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

當我們在 Chrome 開發(fā)者工具里打開 SAP Smart Edit 時，發(fā)現(xiàn)同本文介紹的前兩個使用場景類似，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 配置界面里維護。后半部分包含了 SAP Commerce Cloud 后臺動態(tài)生成的 cmsTicketId 字段，作為 SAP Smart Edit 和 SAP Spartacus 集成的一個 Contract，通知 Spartacus 當前應該工作在 Preview 模式。

總結

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

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

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

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

• 從一個實際的例子出發(fā)，談談SAP Commerce Cloud電商云的UI自定義開發(fā)

• SAP Commerce Cloud (電商云) UI 的懶加載功能

• SAP CRM Fiori 應用和 SAP Commerce Cloud (電商云) UI 如何通過調(diào)整CSS來改變UI顯示風格

• SAP 產(chǎn)品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商云) UI 增強實現(xiàn)中的體現(xiàn)

• 一小時內(nèi)在本地搭建SAP Commerce Cloud(電商云)的前后臺運行環(huán)境

• SAP Commerce Cloud ( 電商云 ) 路由路徑的自定義配置與開發(fā)

• SAP UI渲染模式：客戶端渲染 VS 服務器端渲染

• 響應式編程在 SAP 標準產(chǎn)品 UI 開發(fā)中的一個實踐

• SAP Commerce Cloud UI 的用戶會話管理

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

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

• SAP 產(chǎn)品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商云) UI 增強實現(xiàn)中的體現(xiàn)

• 響應式編程在 SAP 標準產(chǎn)品 UI 開發(fā)中的一個實踐

• 談談 SAP 產(chǎn)品 UI 開發(fā)中的組件概念

• 關于 SAP 產(chǎn)品 UI 的搜索引擎優(yōu)化 SEO - Search Engine Optimization

• 聊聊 SAP 產(chǎn)品 UI 上的消息顯示機制

• SAP 產(chǎn)品 UI 里的容器組件的概念和開發(fā)概述

• SAP產(chǎn)品的Field Extensibility

• SAP Cloud for Customer Extensibility的設計與實現(xiàn)

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

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。