close

這幾天大爺遇到了一個大瓶頸

搞了好多天

看了一堆的文章真的是搞的我霧煞煞

終於找到比較簡單的方法來解決

以下就來介紹一下

順便做個記錄吧


這個瓶頸是關於iframe跨不同網域的問題

在HTML5有提供一個 window.postMessage 的方法

不過這個方法只支援IE8以上


所以IE8以下的瀏覽器要達到這個技巧就得繞繞圈子了

一般網路上最常見的解決方式是透過 document.location.hash (這個是用來設定當前位置的url中的參數(#號部分))

透過這個小技巧…就能讓主頁面和iframe子頁面互相傳遞資料

但有些缺點…就是會有長度上的限制

而且瀏覽器的上一頁、下一頁的機制會被破壞


如果要傳遞比較大的資料就會透過 window.name 的技巧來實作了

(請參考 http://www.wowbox.com.tw/blog/article.asp?id=3031 )


理論上呢…透過 document.location.hash 有兩種方式

第一種：透過在主網域裡再新增一個proxy.html的中間者來做兩邊互相溝通的橋樑

(可參考 http://ued.sohu.com/article/518 )


第二種：

若是不想透過中間者的話…那兩邊就得不斷的互相監聽對方是否有更改 document.location.hash 內容

然後再根據裡面的內容來做適當的回應

至於監聽的實作可以透過更改iframe大小來監聽resize這個事件

(可參考 http://adamlu.com/?p=325 )

大致上的理論就是這樣

當然啦…知道理論之後要實作…其實也沒太大的困難

可是如果有人願意提供那就更好啦…哈


沒錯…就是有好心人替我們解決了這個煩人的問題


jQuery postMessage: Cross-domain scripting goodness


這是一支用來實作iframe跨網域的jquery plugin

程式會先判斷瀏覽器是否有支援window.postMessage 的方法

沒有就改用上面介紹的document.location.hash方式。


官網：http://benalman.com/projects/jquery-postmessage-plugin/

使用的方式是主頁面和子iframe頁面都需先引入jquery.ba-postmessage.js 原始檔

下面就是官方網站所提供的簡單使用方式…兩邊都可以互相傳遞資料給對方


主頁面接收端程式

 

1.$.receiveMessage(
2.function(e){
3.alert( e.data ); //接收的訊息
4.},
5.'http://rj3.net' //只允許從這個域名傳遞來的訊邊
6.);


子頁面iframe傳送端程式

1.$.postMessage(
2.'hello world', //傳遞出去的訊息內容
3.'http://benalman.com/test.html', //接收端的域名
4.parent  //負責溝通的物件，預設為parent
5.);



官網提供的技術文件：http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

這邊是官網提供的更完整的範例：http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大爺 的頭像
    大爺

    太陽底下沒有新鮮事

    大爺 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄