需求一:主頁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 中的內容必須是我們可控的,但是至少我們這種實作方式是建立在瀏覽器的安全規則之上的,沒有破壞應用程式本身的安全性。
實作時需要考慮的一些細節
盡量考慮了易用,可擴充性和可維護性,例如:
讓第三方App 只需載入一個我們提供的JS種子檔案就能很方便的使用我們為其提供的各種工具
上面的各種工具,我們採用包的形式進行組織,最大化的實現按需加載
第一條中的JS種子檔案只提供基礎的方法實現,並且把最常用的工具包放在裡面,例如高度自適應
透過種子文件,我們也提供給第三方App 一些常用的JS工具包,而且直接使用的類似YUI3模組的動態載入機制就可使用指定的工具包
對第三方App 和主頁面傳遞的資料進行分類(自我調用,登入驗證,傳遞資料等等)
傳遞的數據使用滿足特定規範的JSON格式,並透過統一的服務出口發出去,主頁面提供一個統一服務介面解析數據,並根據規範呼叫相應的方法
還有,就是版本控制的問題,為了盡量減少給第三方App帶來影響,以上所有這些JS檔案的版本都是採用向後相容的策略,小版本使用伺服器設定SQUID快取特定頻率的失效時間實現,大版本更新根據用戶自己的需求手動更改
當然,以上可能不是最優的解決方案,只是希望能給你一些幫助和引導,我們也在逐步的改進我們的一些實現方式,比如版本控制這塊兒,我們也有一些問題需要解決
具體的程式碼
主頁面A的源碼
複製代碼代碼如下:
Js代碼
/*主頁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">
function init(){
document.domain = 'bai.sohu.com';
alert('我是主框架,嵌入了第三方應用IframeB,下面開始載入應用程式');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/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" style="display:none;"></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>
</head>
<body onload="init();">
<p style="height:500px;">我是三方應用,我的網域是:test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</body>
</html>
<script type="text/javascript">
function init(){
alert('我是第三方App,下面開始創建和主框架同域的通信通道IframeC,並設定它的src,用#號傳遞高度值');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/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透過參數(#)傳遞高度值,我現在呼叫主頁面方法去設定IframeB的高度');
top.callback(window.location.href.split('#')[1]);
</script>