跨域傳值即主頁面與iframe之間互相傳值

更新時間：2013年12月09日 16:51:55 投稿：whsnow

主頁面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 需要給主頁面?zhèn)鬟f數據，然后主頁面根據獲得到數據后進行特定的處理

實現方式

實現的技巧就是利用一個 IframeC，它嵌入到 iframe B 中，并且和主頁面A必須保持是同域，然后我們通過它充分利用上面第一種通信方式的實現原理就能把 iframe B 的數據傳遞給 iframeC，接下來的問題就是怎么讓iframeC把數據傳遞給主頁面A ，如下圖所示：

因為，iframeC 和主頁面是同域的，所以它們之間傳遞數據就變得簡單多了，我們這里的方式就是使用一個經常使用的屬性 window.top (也可以使用window.parent.parent)，它返回對載入瀏覽器得最頂層 window 對象的引用，這樣我們就能直接條用主頁面A中方法啦，哈哈哈，簡單吧。
到此，我們做個簡單分析總結

這種實現方式的前提也是最大的缺點就是 iframe 中的內容必須是我們可控的，但是至少我們這種實現方式是建立在瀏覽器的安全規(guī)則之上的，沒有應用本身的安全性。
實現時需要考慮的一些細節(jié)

盡量考慮到了易用，可擴展性和可維護性，比如：

讓第三方 App 只需加載一個我們提供的JS種子文件就能很方便的使用我們?yōu)槠涮峁┑母鞣N工具
上面的各種工具，我們采用包的形式進行組織，最大化的實現按需加載
第一條中的JS種子文件只提供基礎的方法實現，并且把最常用的工具包放在里面，比如高度自適應
通過種子文件，我們還提供給第三方 App 一些常用的JS工具包，而且直接使用的類似YUI3模塊的動態(tài)加載機制就可使用指定的工具包
對第三方 App 和主頁面?zhèn)鬟f的數據進行分類（自我調用，登錄驗證，傳遞數據等等）
傳遞的數據使用滿足特定規(guī)范的JSON格式，并通過統一的服務出口發(fā)出去，主頁面提供一個統一服務接口解析數據，并根據規(guī)范調用相應的方法
還有，就是版本控制的問題，為了盡量減少給第三方App帶來影響，以上所有這些JS文件的版本都是采用向后兼容的策略，小版本使用服務器設置SQUID緩存特定頻率的失效時間實現，大版本更新根據用戶自己的需求手動更改
當然，以上可能不是最優(yōu)的解決方案，只是希望能給你一些幫助和引導，我們也在逐步的改進我們的一些實現方式，比如版本控制這塊兒，我們也有一些問題需要解決

具體的代碼

主頁面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，下面開始創(chuàng)建和主框架同域的通信通道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>