SNS平台與第三方APP的JS通訊實現

2021-09-30 09:30:15 字數 1527 閱讀 2601

可參考的 

在我們的白社會裡,需要嵌入第三方應用,而嵌入的方式是使用 iframe,為了頁面美觀,這裡就有乙個最簡單的需求:iframe 的高度需要跟隨其本身內容的變化而實時變化,這就要求主頁面根據 iframe 的內容實時的去設定其樣式 height 值,但是因為第三方應用和白社會不屬於同乙個域,所以給實現帶來了一點小小的麻煩,所以才有以下的一些討論…

其實這裡需要解決的是,在乙個頁面 a 中嵌入乙個iframe b,a 和 b 不屬於同乙個域,但是 a 和 b 需要進行一些必要的通訊,傳遞少量的資料資訊,所以問題的實質就是主頁面與跨域 iframe 之間怎麼通訊,也就是怎麼傳遞資料資訊

下面就針對兩種不同的需求,總結一些比較簡單,常用和穩定的解決方案。

需求一:主頁面a 怎麼向 iframe b 傳遞資料呢?

這種方式,是主頁面需要給 iframe b 傳遞資料,然後 iframe b 獲得到資料後進行特定的處理

實現方式

實現的技巧就是利用 location 物件的 hash 值,通過它傳遞通訊資料,我們只需要在主頁面a中設定 iframe b 的 src 後面多加個 #data 字串(data就是你要傳遞的資料),如下圖所示:

然後在 iframe b 中通過某種方式能即時的獲取到這兒 data 就可以了,其實常用的一種方式就是:

需求二:iframe b 怎麼向 主頁面a 傳遞資料呢?

這種方式,是 iframe b 需要給主頁面傳遞資料,然後主頁面根據獲得到資料後進行特定的處理

實現方式

實現的技巧就是利用乙個** iframec,它嵌入到 iframe b 中,並且和主頁面a必須保持是同域,然後我們通過它充分利用上面第一種通訊方式的實現原理就能把 iframe b 的資料傳遞給 iframec,接下來的問題就是怎麼讓iframec把資料傳遞給主頁面a ,如下圖所示:

因為,iframec 和主頁面是同域的,所以它們之間傳遞資料就變得簡單多了,我們這裡的方式就是使用乙個經常使用的屬性 window.top (也可以使用window.parent.parent),它返回對載入瀏覽器得最頂層 window 物件的引用,這樣我們就能直接條用主頁面a中方法啦,哈哈哈,簡單吧。

當然還有其他一些方式,也都測試過,不是瀏覽器相容性不好,就是實現起來複雜,通過以上方式就能很方便的在跨域的 iframe 和主頁面之間傳遞資料了,當然也就能解決上面提到的設定 iframe 高度的問題了,但是這種實現方式的前提也是最大的缺點就是 iframe 中的內容必須是我們可控的,但是至少我們這種實現方式是建立在瀏覽器的安全規則之上的,沒有破壞應用本身的安全性。

上面的各種工具,我們採用包的形式進行組織,最大化的實現按需載入

第一條中的js種子檔案只提供基礎的方法實現,並且把最常用的工具包放在裡面,比如高度自適應

傳遞的資料使用滿足特定規範的json格式,並通過統一的服務出口發出去,主頁面提供乙個統一服務介面解析資料,並根據規範呼叫相應的方法

當然,以上可能不是最優的解決方案,只是希望能給你一些幫助和引導,我們也在逐步的改進我們的一些實現方式,比如版本控制這塊兒,我們也有一些問題需要解決

第三方平台移植

因為圖形編輯器所依賴的 t平台即將整合到 p平台,在專案做了一年半之後,要將整個專案從 t平台移植到 p平台。之前的 重構為專案 移植到 p平台打好了基礎,移植過程中,只要將 ui部分的 根據 p平台的框架重新編碼,就可以了,剩下了不少 effort。因為開發所依賴的平台改變了,ui部分的 需要重新...

第三方平台API呼叫

其實都遵守乙個協議,一直想寫篇總結來著,突然對著螢幕就沒什麼好說的了 就是兩點,第一獲取令牌,第二用令牌去換取資訊 第一次多用key或者key srect,得到的是token 第二次 用token去呼叫令牌 傳送的請求有2中,post get 罷了其實這就是精髓 第一獲取令牌,第二用令牌去換取資訊 ...

第三方部落格平台足跡

第三方部落格平台就是我們常說的免費部落格。在免費部落格發布文章,一般能帶上dofollow的鏈結,是一種常用的外鏈建設手段。除了著名的blogger.com,wordpress.com等一些大型的第三方部落格平台社群可以讓我們註冊賬戶發部落格,網際網路上還有很多較小知名度比較低的第三方部落格平台。仔...