跨域傳值即主頁面與iframe之間互傳值_javascript技巧

需求一：主頁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*/




type="text/javascript">
function init(){
document.domain = 'bai.sohu.com'
alert('나는 제3자가 포함된 메인 프레임입니다. 애플리케이션 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
}

i 내 도메인은 bai.sohu.com

iframeB 소스 코드(iframePage.html)

복사 code

코드는 다음과 같습니다. < ;head>

;/head>

나는 타사 애플리케이션이고 내 도메인은 test입니다. .com

>



iframeC의 소스 코드




코드 복사

코드는 다음과 같습니다.