SNS平臺與第三方APP的JS通信實現

2021-01-11 網際網路的那點事
先看一下我們遇到了什麼問題？

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

仔細分析一下問題的實質是什麼呢？

其實這裡需要解決的是，在一個頁面 A 中嵌入一個iframe 名字叫 B，A 和 B 不屬於同一個域，但是 A 和 B 需要進行一些必要的通信，傳遞少量的數據信息，所以問題的實質就是主頁面與跨域 iframe 之間怎麼通信，也就是怎麼傳遞數據信息

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

主頁面A 怎麼向 iframe B 傳遞數據iframe B 怎麼與 主頁面A 傳遞數據需求一：主頁面A 與 iframe B 的怎麼傳數據呢？

這種方式，是主頁面需要給 iframe B 傳遞數據，然後 iframe B 獲得到數據後進行特定的處理

實現方式

實現的技巧就是利用 location 對象的 hash 值，通過它傳遞通信數據，我們只需要在主頁面A中設置 iframe B 的 src 後面多加個 #data 字符串（data就是你要傳遞的數據），如下圖所示：

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

1. 在 iframe B 中通過 setInterval 方法設置定時器， 監聽 location.href 的變化即可獲得上面的 data 信息2. 然後 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 中的內容必須是我們可控的，但是至少我們這種實現方式是建立在瀏覽器的安全規則之上的，沒有破壞應用本身的安全性。

進一步叨叨，實現時需要考慮的一些細節

上面的分析，其實只是一個簡單的原理，在白社會裡，雖然我們目前的需求還僅僅是實現第三方 iframe 形式的 App 的高度自適應，但是我們在實現的時候儘量考慮到了易用，可擴展性和可維護性，比如：

讓第三方 App 只需加載一個我們提供的JS種子文件就能很方便的使用我們為其提供的各種工具上面的各種工具，我們採用包的形式進行組織，最大化的實現按需加載第一條中的JS種子文件只提供基礎的方法實現，並且把最常用的工具包放在裡面，比如高度自適應通過種子文件，我們還提供給第三方 App 一些常用的JS工具包，而且直接使用的類似YUI3模塊的動態加載機制就可使用指定的工具包對第三方 App 和 主頁面傳遞的數據進行分類（自我調用，登錄驗證，傳遞數據等等）傳遞的數據使用滿足特定規範的JSON格式，並通過統一的服務出口發出去，主頁面提供一個統一服務接口解析數據，並根據規範調用相應的方法還有，就是版本控制的問題，為了儘量減少給第三方App帶來影響，以上所有這些JS文件的版本都是採用向後兼容的策略，小版本使用伺服器設置SQUID緩存特定頻率的實效時間實現，大版本更新根據用戶自己的需求手動更改當然，以上可能不是最優的解決方案，只是希望能給你一些幫助和引導，我們也在逐步的改進我們的一些實現方式，比如版本控制這塊兒，我們也有一些問題需要解決回過頭來，我們再看點兒具體的代碼

主頁面A的源碼

/*主頁面A*/<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN「「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd「><html xmlns=「http://www.w3.org/1999/xhtml「><head><meta http-equiv=「Content-Type「 content=「text/html; charset=utf-8「 /><title>主頁面A</title><script type=「text/javascript「 src=「/r/j-src/kola/core/kola.js「></script><script type=「text/javascript「> function init(){ document.domain = 『bai.sohu.com'; alert(『我是主框架，裡面嵌入第三方應用的IframeB,下面開始加載第三方應用』); var iframeTag = document.getElementById(『frameB』), iframeSrc = 『http://10.10.92.117/test/springwang/CrossDomain/autoSetHeight/iframePage.html'; iframeTag.src = iframeSrc; iframeTag.style.display = 『block'; }; function callback(h){ var iframeB = document.getElementById(『frameB』); alert(『IframeC調用我（主框架）接口，把IframeB的高度傳給我，具體值是：』 + h); iframeB.style.height= h + 10 + 『px'; iframeB.src += 『#』+ h };</script></head><body onload=「init();「> <p>我是主頁框架，我的域是：bai.sohu.com</p> <iframe id=「frameB「 name=「frameB「 style=「display:none;「 src=「」></iframe> </body></html>

iframeB（iframePage.html）的源碼

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN「「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd「><html xmlns=「http://www.w3.org/1999/xhtml「><head><meta http-equiv=「Content-Type「 content=「text/html; charset=utf-8「 /><title>iframeB</title><script type=「text/javascript「 src=「/r/j-src/kola/core/kola.js「></script></head><body onload=「init();「> <p style=「height:500px;background-color:#EEEEEE;「>我是三方應用，我的域是：10.10.92.117</p> <iframe id=「frameC「 name=「frameC「 src=「」style=「height:1px;width:1px;display:none;「></iframe></body> </html> <script type=「text/javascript「> function init(){ alert(『我是第三方應用，下面開始創建和主框架同域的通信通道IframC,並設置它的src，用#號傳遞高度值』); var iframeTag = document.getElementById(『frameC』), iframeSrc = 『http://bai.sohu.com/test/springwang/CrossDomain/autoSetHeight/iframePageC.html#』, pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight; iframeTag.src = iframeSrc + pageHeight; iframeTag.style.display = 『block'; window.setTimeout(function(){ alert(『主頁面設置我（IframeB）的src，通過Hash（#）給我傳遞它收到的高度：』 + location.hash); },2000); };</script>

iframeC（iframePageC.html）的源碼

<script type=「text/javascript「> document.domain = 『bai.sohu.com『; alert(『我（IframeC）收到iframeB通過參數（#）給我傳遞高度值，我現在調用主頁面方法去設置IframB的高度『); top.callback(window.location.href.split(『#『)[1]);</script>
完結了

希望以上簡單的分析能給你當前的項目有一些些幫助，大家多多拍磚啊~~~~~~~~~~~~~~~~~~~~最後一天上班，下周休假，哇哈哈，祝大家新春愉快~~

來源：http://ued.sohu.com/article/518



相關焦點

  • 第三方app才是元兇
    其實，WiFi探針技術本無偷竊個人隱私的功能，手機裡亂裝的第三方app才是出賣用戶數據的元兇。WiFi探針不能獲取個人信息許多網友們現在還是搞不清WiFi探針是什麼。其實，WiFi探針是依附於無線AP等WiFi發射設備中的一種功能。
  • 基於WebGL的3D可視化告警系統關鍵技術解析 ThingJS
    為了解決開發效率低的問題，出現了基於 JavaScript語言的第三方庫-three.js，這是開源的技術，受到了廣大前端轉3D開發師的追捧。three.js是一個跨瀏覽器的腳本，它封裝了底層的圖形接口，對 WebGL有很好的支持，不需要掌握複雜的圖形學知識就能實現三維場景的渲染。
  • 基於webgl的三維室內空間邏輯建模 three.js ThingJS
    第一類通道需要在地圖上進行表達，第二類通道需根據其特點、重要性以及實際需求選擇表達。三維室內場景基本都帶了默認的層級切換腳本，讓相機視角進入建築內，因此出入口不僅是建築可視化的一部分，也是獲取建築內信息的一個虛擬通道。
  • 從零做網站開發:基於Flask和JQuery實現表格管理平臺
    摘要：本文將為大家帶來基於Flask框架和JQuery實現管理平臺網站的開發功能。【寫在前面】你要開發網站？ 嗯。。會Flask嗎？ 什麼東西，沒聽過。。。會JQuery嗎？我會F12打開網站好吧，那我們來寫個簡單的表格管理平臺。基於Flask框架和JQuery實現管理平臺網站的開發功能，我代碼編寫用了2天的時間 ，從零開始寫；又對具體實現流程，自己斷斷續續地整理總結了近半個月。從自我感覺來說，整個過程和結果的實現都讓我很滿意。
  • 多維雲通信-手機簡訊驗證碼平臺首選
    、語音、流量等電信業務及雲通信解決方案，獲得了一致的好評。深圳市多維互聯通信有限公司不斷發展，不斷壯大，業務範圍已經擴大到了34個省市，更有中國移動、聯通、電信三大運營商的支持，與三大運營商的合作是深圳市多維互聯通信有限公司成長的重要途徑，這也使得深圳市多維互聯通信有限公司累積了發展的經驗。
  • VUE與JS的對比
    我們需要讓所有綁定的對象和元素都能感知到變化1.1.1. vue與js的對比1.1.1.1. js的實現(了解)<!引入js文件--><script src="..視圖 view--><div id="app"><h4>數據雙向綁定----vue</h4><input type="text" name="" id="" v-model="message" />
  • 第三方、第四方掃二維碼的支付平臺有哪些?
    做支付類的從業者都知道，關於掃碼支付服務商可以分為第三方支付、第四方支付兩種平臺，而第三方支付可以分為在線支付，行動支付，跨境支付等。具體而言，有簡訊支付、跨境支付、聲波支付，指紋支付，網銀支付等。
  • 運用商業模式畫布,解析第三方體檢預約平臺
    圖六 第三方體檢預約平臺商業模式畫布分析第三方體檢預約平臺商業模式中存在的風險。從重要合作來講，第三方體檢平臺的合作機構包括體檢機構與企事業單位兩類，其中與體檢機構的合作為競爭性的戰略合作，而與企事業單位的合作多為銷售型的合作更像是一種客戶關係，將在客戶細分中進行分析。目前來講，第三方體檢平臺與體檢機構的合作又可分為與民營體檢機構和公立醫院體檢部。
  • vue.js初入門(十一組件-下篇)
    使用 v-on 綁定自定義事件每個 Vue 實例都實現了事件接口(Events interface)，即：使用 $on(eventName) 監聽事件使用 $emit(eventName) 觸發事件有時候非父子關係的組件也需要通信。
  • 聚投訴網友投訴樹袋熊:投訴國美易卡推薦的第三方貸款軟體
    張女士向公益性消費投訴平臺21CN聚投訴反映：「本人於2019年12月10號在國美易卡上推薦的第三方貸款平臺沃銀分期中的樹袋熊app中點擊測評額度，然後填資料，審核，提現操作中，提現的額度2500.在本人對借款利息不知情的情況下，直接放款到我銀行卡裡，借2500，到帳只有1375.這麼，而且只有5天的使用期限，這和高利貸有什麼區別，打客服是私人電話接的，浙江的號碼，說是她們放出來的錢是
  • 從Rust到遠方:ASM.js星系
    Emscripten，如上圖所示，是一個在這個Web平臺演進過程中非常重要的一個項目。I will not explain deeply what ASM.js is with a lot of examples. I recommend instead to read Asm.js: The Javascript Compile Target by John Resig, or Big Web app? Compile it! by Alon Zakai.
  • 使用reveal.js製作精美的網頁版PPT
    隨著 mac 的普及和動畫技術的發展，諸如Keynote、Prezi 等新秀陸續出現，它們不僅輕量且可以實現各種炫目的動畫效果.製作需要花費大量時間, 受平臺限制所以對於不熟悉PPT套路的技術工作者來說, 往往很難快速製作出精美的PPT.接下來我們再看看reveal.js的優勢.
  • Facebook開放Messenger平臺
    如今的Messenger平臺面向所有的開發者開放，首批合作的共有40款app。藉助Facebook的Messenger平臺，開發者可以更簡單便捷的開發第三方app；另一方面，全世界超過6億的臉書用戶能夠通過發送私密或群組信息的方式，在平臺上分享自己的GIF、照片、短視頻、音頻等作品，讓聊天變得更加生動有趣的同時，也刺激了開發者們研發出更多優秀的第三方app。Messenger平臺向用戶提供了可供選擇安裝的app。
  • 第三方網店轉讓平臺提供哪些保障?
    隨著網店轉讓的興起，越來越人覺得網店轉讓平臺是一種保障，那麼網店轉讓提供了哪些保障？1、法律保障第三方網店轉讓平臺會提供給商家和買家籤訂一份合理合法的網店轉讓合同，這一點非常重要，可以保障買家和賣家的權益。不管是任何一方違背合約，都可以通過法律的武器來維護自己的權益。
  • iOS hybrid App 的實現原理及性能監測
    ，在移動領域的開發時間超過七年，前前後後涉獵過很多個平臺。隨著大部分移動平臺自己走向死亡，現在我也主要專注在了iOS和Android兩大移動平臺，偶爾也會客串下Windows這個不知道是移動還是桌面的平臺。 十年前，我剛入行的時候，曾經認為自己將會永遠做一個C++程式設計師，於是花了大量時間在C++上。現在C++也是我工作所用的主力語言之一，工作之外也會偶爾寫點什麼娛樂一下。
  • WebApp與Native App再戰一輪?
    還有各種開發、打包web/hybrid應用的產品：Cordova, Crosswalk，nw.js，Electron。它們也許在各自領域有所成功，但整體的現狀和處境很難說web app對native app的世界造成了足夠威脅。但Web app也在不斷反思和演進，近來一系列技術革新與發展讓web app成為作業系統頭等公民的目標變得不同以往的清晰。
  • 如何實現app一鍵登錄? 極光認證最全配置教程
    最近看到很多app都有本機號碼一鍵登錄功能，感覺這個功能對於app的註冊轉化和用戶體驗提升都有很大幫助，相信以後會成為一個主流的驗證方式。一鍵登錄主要功能就是讓用戶使用本機號碼一鍵登錄/註冊app。手機號碼即用戶帳號，無需使用密碼和簡訊驗證，運營商網關直接校驗手機本機號。
  • Twitch平臺為新主播提供幫助 新APP將帶來便利
    根據最新消息，Twitch直播平臺目前已經逐步開始為新主播提供各種指導和幫助了，官方目前還開發了新APP「Twitch Studio」，為新主播提供各種有益的平臺直播服務。目前，絕大多數主播都會使用第三方直播工具，例如OBS和Xsplit。
  • 萬花瞳|探訪全國最大第三方天饋線檢測實驗室
    萬花瞳|探訪全國最大第三方天饋線檢測實驗室 2020-11-20 12:41 來源：澎湃新聞·澎湃號·媒體
  • 入門|egg.js 入門之egg-jwt
    data: { username: 'admin', lastName: '123456' }, headers:{ // 切記 token 不要直接發送，要在前面加上 Bearer 字符串和一個空格 'Authorization':`Bearer ${token}` }}).then(res=>{ console.log(res.data)})這裡就完成了egg.js