這是 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 應用的強項之一。

![](https://img-blog.csdnimg.cn/img_convert/38f4e8c54caa443d0a2e6212e4ee8c9d.png)

使用 SAP CRM 業務角色 Analytics Professional 登入系統，可以建立 SAP HANA Live Report 這種型別的分析報表：

![](https://img-blog.csdnimg.cn/img_convert/88399cbff62c041417651559daa1230e.png)

![](https://img-blog.csdnimg.cn/img_convert/e574f78e8632a4edb0abc83f022f3b60.png)

![](https://img-blog.csdnimg.cn/img_convert/0ec71d772e06e9801eaeead6f89d63aa.png)

SAP HANA Live Report，使用了來自 SAP 釋出的位於名稱空間 sap.hba.crm 下的 HANA 模型。這些模型定義了報表支援的所有查詢引數，在報表建立嚮導裡可以選擇使用哪些引數，以及維護預設值。

![](https://img-blog.csdnimg.cn/img_convert/d7247478aac7dea6a671d7232bdcbec5.png)

![](https://img-blog.csdnimg.cn/img_convert/472c275c88950d100328a697e438f39f.png)

最後建立出的報表顯示如下圖所示。有經驗的 WebClient UI 開發人員，可以一眼看出，這個介面的開發技術應該並非 WebClient UI.

![](https://img-blog.csdnimg.cn/img_convert/0baa5d5952365728e39f3307682fc4d1.png)

我們在 SAP CRM 裡找到上圖頁面的 WebClient UI 應用名稱為 CRM_ANA_OD_RTC, 字尾 RTC 即 Run Time Container，執行時容器。開啟這個應用頁面的 HTML 原始碼，發現該頁面只是一個殼(Wrapper)，透過第 18 行的 iframe 元素，嵌入了另一個 SAP UI5 應用，其名稱在第 19 行的 src 屬性裡能夠找到：crm_ana_od_ui5.

![](https://img-blog.csdnimg.cn/img_convert/3b5e899fcf39f1233484edcbe5fe9a13.png)

![](https://img-blog.csdnimg.cn/img_convert/0b10a9c8c97e85d1e79a73d7db36b30f.png)

關於 SAP UI 開發技術的演進歷史，參考 Jerry 的文章：

[**SAP UI 和 Salesforce UI 開發漫談**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484460&idx=1&sn=aafe62ded3bc7b07f4d3da99f3926ab3&chksm=ead5b6bbdda23fad3c4b7e8148d61e4c9a2609f13151a221da1bf313a25f0df37fab8d9ec557&scene=21#wechat_redirect)。

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

[**SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)。

總結：在 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 搜尋頁面中去。

![](https://img-blog.csdnimg.cn/img_convert/a46d38dc3648eb3db4e8bc0995e73d2f.png)

SAP Cloud for Customer Mashup 技術底層仍然採用了 iframe 元素來嵌入第三方網頁。在 Chrome 開發者工具裡找到 iframe，透過 src 屬效能清楚地發現被嵌入的 Bing 引擎 的 url.

![](https://img-blog.csdnimg.cn/img_convert/14866cc1f876b353ea166532f9bcd0d8.png)

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

我們在 SAP C4C Mashup 編輯頁面裡選擇 Mashup Category，這個下拉選單裡的選擇，決定了我們可以將 C4C 哪些標準 Business Objects 的哪些欄位，傳遞給最終會被嵌入到 C4C 標準頁面的自開發 HTML 頁面裡。

![](https://img-blog.csdnimg.cn/img_convert/c98f233940f425f607dd8298b2797ce6.png)

比如上圖我選擇的 Mashup Category 為 Business & Finance, 這意味著我可以在我自定義的 HTML 頁面裡，訪問該 Category 暴露出的和當前登入的 Employee 相關的欄位值。

下圖是我編輯的一個簡單的 HTML 頁面的原始碼，其中第 6 行變數 sap.byd.ui.mashup.context.system.EmployeeName, 執行時會被該 BO 欄位的實際值，Dr. Wang Jerry 所替換。
![](https://img-blog.csdnimg.cn/img_convert/4d297eda73cd700346968c2a92341c84.png)

執行時被嵌入的自定義 HTML 欄位以及對應的 iframe 元素如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/3f368c71dd8edbdfe9a03615f2259325.png)

總結：在 SAP Cloud for Customer 透過 Mashup 對標準 UI 進行增強的使用場景裡，被增強的 C4C UI 的開發技術是 SAP UI5，而被嵌入的第三方介面，可以採取任何前端技術開發，這些技術棧對於 C4C 宿主 UI 來說完全透明。

關於 Mashup 在 SAP Cloud for Customer 中的更多使用場景，請參考 Jerry 之前的文章：

*   [**如何在 SAP Cloud for Customer 頁面嵌入自定義 UI**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489527&idx=1&sn=11fea227e0d0f3e32753ca70733100e9&chksm=ead5a560dda22c76c86bad8037da4014e71cb642b311e5b62c7bc070e16f7d562b6e6c43d8bc&scene=21#wechat_redirect)

*   [**SAP Analytics Cloud 和 SAP Cloud for Customer 的整合**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489643&idx=1&sn=3fbc25c7121b13106a22e478c805b16b&chksm=ead5aafcdda223ea2d5c82f1fc849c96880e4f68fac43e9b1d8076ea4d6cba17be0060a3d017&scene=21#wechat_redirect)

# SAP 電商雲 Smart Edit 和 SAP Spartacus UI 的整合

SAP Smart Edit 是一個能以所見即所得方式管理 SAP 電商雲店面內容的 Web 應用程式。

關於 SAP Smart Edit 的更多介紹，請參考 Jerry 這個[影片](https://www.zhihu.com/zvideo/1432827244515737600)。

下圖是 Spartacus 電商雲 Spartacus UI 首頁，在本地執行時，開啟的店鋪為 sample 資料裡自帶的 Powertools Site：

![](https://img-blog.csdnimg.cn/img_convert/66a836beeddc4bd75d0c76872c0b7016.png)

在 Backoffice Website 配置介面裡，將其 WCMS Cockpit Preview URL 設定成 http://localhost:4299/powertools-spa：

![](https://img-blog.csdnimg.cn/img_convert/34b8072c0c2ee3f967f903f61226443b.png)

然後訪問 SAP Smart Edit url：

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

從下拉選單裡選擇我們想使用 SAP Smart Edit 進行編輯的 SAP 電商雲店面：

![](https://img-blog.csdnimg.cn/img_convert/a454d89e85387d866a8486fce5de933c.png)

![](https://img-blog.csdnimg.cn/img_convert/369334566a5011f293e143c05be6b510.png)

等到 SAP Spartacus 頁面在 SAP Smart Edit Preview 皮膚下渲染完畢後，就可以在此直觀地對當前開啟的店面進行修改了：

![](https://img-blog.csdnimg.cn/img_convert/a7c4b369bf23faf4d1c76d1ceecf3b3e.png)

比如新增一個新的 CMS Flex Component，然後到 Spartacus 應用裡為該 CMS Component 建立並實現對應的 Angular Component，以實現建立 SAP 電商雲自定義 UI 的需求。

![](https://img-blog.csdnimg.cn/img_convert/c16d14c24fdc0c454c3a338e29c7d7fd.png)

[**各種 SAP 產品的自定義 UI 建立和整合方法一覽**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493943&idx=1&sn=488117754b063c0b72f0d3107deadcc6&chksm=ead65ba0dda1d2b6e9cc21e48769686a343a5789c691aa7902e15d9985925790499c67e579ca&scene=21#wechat_redirect)。

當我們在 Chrome 開發者工具裡開啟 SAP Smart Edit 時，發現同本文介紹的前兩個使用場景類似，SAP Spartacus UI 也是透過 iframe 的方式，被嵌入到 SAP Smart Edit Preview 皮膚內部。

![](https://img-blog.csdnimg.cn/img_convert/020d9cc477bf3ae689c0635890b324ba.png)

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”,我認為太過絕對。

![](https://img-blog.csdnimg.cn/img_convert/d6da6c299bd5339273a04eee376fef34.png)

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

希望本文能幫助大家對於 iframe 在 SAP 產品前端開發中的使用場景有一個最基本的瞭解，感謝閱讀。

**Jerry 的 SAP 電商雲 Spartacus UI 開發合集**

*   [從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (電商雲) UI 的懶載入功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [一小時內在本地搭建SAP Commerce Cloud(電商雲)的前後臺執行環境](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491814&idx=1&sn=4eae20513c64ae3d02db0e0cea0101ef&chksm=ead65271dda1db678b6d54485603ba0cce263bf751c346b47310fac29741d77c2ab834e69887&scene=21#wechat_redirect)

*   [SAP Commerce Cloud ( 電商雲 ) 路由路徑的自定義配置與開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491908&idx=1&sn=391f3069597e21d342ce86fdbbef8d0c&chksm=ead653d3dda1dac520f13876de26994fa33ad1f55d616d67b86914bc559427190387770d69d5&scene=21#wechat_redirect)

*   [SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)

*   [響應式程式設計在 SAP 標準產品 UI 開發中的一個實踐](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492627&idx=1&sn=2f879542eefcd13cca66d6f0dabf2964&chksm=ead65684dda1df923bb11f5da42616a1693f2d8eb7e0218a5a4d3f1a4b59eb957dc105d42938&scene=21#wechat_redirect)

*   [SAP Commerce Cloud UI 的使用者會話管理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493059&idx=1&sn=3e56adfcd4b0562172ca87ec338fd536&chksm=ead65754dda1de4264f813da6bbdf91befd8fc0289a68048b19a4c944d2d5c64e03e65e0183b&scene=21#wechat_redirect)

**Jerry 的 SAP UI 開發綜述文章合集**

*   [SAP UI和Salesforce UI開發漫談](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484460&idx=1&sn=aafe62ded3bc7b07f4d3da99f3926ab3&chksm=ead5b6bbdda23fad3c4b7e8148d61e4c9a2609f13151a221da1bf313a25f0df37fab8d9ec557&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud(電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [響應式程式設計在 SAP 標準產品 UI 開發中的一個實踐](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492627&idx=1&sn=2f879542eefcd13cca66d6f0dabf2964&chksm=ead65684dda1df923bb11f5da42616a1693f2d8eb7e0218a5a4d3f1a4b59eb957dc105d42938&scene=21#wechat_redirect)

*   [談談 SAP 產品 UI 開發中的元件概念](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493152&idx=1&sn=8b4ff586e8ae6820af1cafeae31f98c6&chksm=ead654b7dda1dda104cd79d6281a7943399cc46a3416127f41c6c0876ba83004014fa46dad1a&scene=21#wechat_redirect)

*   [關於 SAP 產品 UI 的搜尋引擎最佳化 SEO - Search Engine Optimization](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493081&idx=1&sn=fb4b51e593211fa17f9b6a32217914e5&chksm=ead6574edda1de5804e15751f0054854b8f1bd47762ad5b4cb7af22d674f16d4cbb8a92ecbf2&scene=21#wechat_redirect)

*   [聊聊 SAP 產品 UI 上的訊息顯示機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493444&idx=1&sn=3bd8b7541cb5cabc12755774afb29ca5&chksm=ead655d3dda1dcc575efd1ae850d70b167576018f3ee72c87dfe98b9d16b0a620ca6868df11a&scene=21#wechat_redirect)

*   [SAP 產品 UI 裡的容器元件的概念和開發概述](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493883&idx=1&sn=1dbc49885ea55826dddc7dd52eb90d2d&chksm=ead65a6cdda1d37ad6f7a2d0d343695853c98e55b5bf19f0465233e2973efe7bdf2af9adc0e2&scene=21#wechat_redirect)

*   [SAP產品的Field Extensibility](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485012&idx=1&sn=08c9d139d7c127e815a8846cb2473336&chksm=ead5b4c3dda23dd5b4c694cb568e9cc765632ea36d4f5901da4eccd076e3d49075bb0a2a088a&scene=21#wechat_redirect)

*   [SAP Cloud for Customer Extensibility的設計與實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485041&idx=1&sn=01241745ef4f6636ec146611a5c28083&chksm=ead5b4e6dda23df0a167b58283f50b76aca502cdc832d407623a0c17987e0b0e28a352e9b429&scene=21#wechat_redirect)

iframe 在 SAP 三款產品中的三個應用場景

相關文章