有些項目中可能會遇到這樣的需求, 需要在一個項目中嵌入其他的項目的頁面或者功能.並且需要這兩個頁面之間能夠進行交互.
本文主要介紹如何實現這種第三方應用的嵌入, 主要有以下幾個方向:
1.iframe引入第三方應用
2.嵌入js片段
3.封裝成SDK
本篇將主要介紹第一種, 通過iframe嵌入第三方頁面, 接下來的幾篇文章將分別介紹其他兩種方式
使用iframe嵌入是目前使用很廣泛的一種嵌入方案, 先看幾個案例:
一. 使用案例
- 搜狐移動端使用iframe嵌入廣告:
- 移動端視頻網站使用iframe進行視頻嵌入
- 7724小游戲使用iframe嵌入游戲
二. 實現過程
- iframe標簽引入第三方頁面地址
iframe的src設置為第三方服務器上部署的html頁面，並將需要的參數作為URL的一部分傳遞給該頁面
- 獲取參數請求數據
第三方頁面中,首先獲取到URL中的參數，根據參數向服務端發起ajax請求，獲得頁面需要展示的數據
- 展示頁面
根據獲取的數據，將頁面展示在主頁面上
三. 通信方式
由於iframe頁面與主頁面之間不在同下, 在iframe頁面和主頁面交互時, 會有跨域問題, 不能使用window.parent直接進行交互,目前跨域通信的方案有以下幾種:
- 使用H5的PostMessage
HTML5新增的window.postMessage, 是一種安全的,基於事件的消息API.
- 降級技術
對於低版本瀏覽器, 不支持PostMessage, 可使用以下降級方案:
1.創建與父頁面同源的ifame
2.使用window.name屬性
3.通過hash
4.使用 ADdobe Flash 對象
- 使用easyXDM簡化跨域
easyXDM是一個經過充分測試的JavaScript庫,有如下優點
1.簡化了跨域iframe之間的通信,並已經解決了所有的痛點.
2.easyXDM 集成了現有的多種跨域解決方案，針對不同瀏覽器可以適配最合適的方案
3.可以將原來寫死在頁面上的 iframe 改為通過 easyXDM.Rpc() 的方式進行加載，從而更靈活的實現iframe嵌入。
下面是easyXDM的github地址: https://github.com/oyvindkinsey/easyXDM#readme
以上跨域通信的具體實現不在此詳細介紹.
四. 使用iframe嵌入優劣勢分析
優勢:
- 完全獨立的DOM環境,不會受主頁面的樣式影響
- 完全獨立的window,避免和主頁面其他腳本沖突
- 不需要跨域進行數據請求
- 安全, 主頁面無法訪問和更改iframe的DOM環境
劣勢:
- iframe增加了http請求次數
- iframe標簽創建速度較慢 (可參考博客: https://www.cnblogs.com/sharpxiajun/p/4077515.html)
- 跨域iframe通信實現繁瑣