如何用opener hack方式實現IE6,7完美跨域

2022-07-17 分類：網站建設

有時我們做一個項目時，有需要跨域請求和處理一些大數據量得數據，對于服務端提交的數據非常的之大，get的URL長度限制滿足不了需求，又由于跨域的影響，一直很頭痛數據傳輸的問題。于是乎，上網搜了搜一些跨域的解決方案，無非了iframe嵌iframe，通過window.name或者hash，做跳板，都受到url長度的限制，不是很理想。我們都知道在HTML5中，提供了一種postMessage的消息機制，可以在不同域的頁面上，互相通過window.postMessage(datastring,’limitDomain’)的方式傳遞消息。在需要觸發的頁面注冊onMessage事件，event的data屬性就是傳遞datastring文本。再配合老道的JSON.parse就可以好的傳遞json格式的對象了?？上У氖悄壳癙ostMessage只在IE8，FF和Chrome現版本提供了實現。對于老版本的IE6,7沒有提供實現。

于是在google搜索的時候，無意中發現某高人的Blog提供了一種稱之為IE6,7 opener hack的方式實現跨域，據說是google的工程師率先發現的這個bug，fackbook的登陸頁面就是利用了這個bug實現了postMessage的跨域。

可惜，google了半天，詳細資料基本找不到，也沒有找到一個具體的例子，于是自己搗鼓了一下，寫了個例子，放上來。

下面我們來看下，如何利用這個bug的例子

hosts配置

1: 127.0.0.1 www.a.com 2: 127.0.0.1 www.b.com

test.htm

1:<html> 2:<body> 3:<iframeid="a"src="http://www.b.com/test1.htm">iframe> 4:<script>1: 2:var i=document.getElementById('a'); 3: i.contentWindow.opener={ 4: dd:function(str){ 5:var div=document.createElement('div'); 6: document.body.appendChild(div); 7: div.innerHTML=str; 8: } 9: } 10: setTimeout(function(){ 11: opener.bb('bbbbbbb'); 12: },300) 13:script> 5:body> 6:html>

test1.htm

1:<html> 2:<body> 3: 4:<script>1: 2: window.opener.dd('aaaaaaaaa'); 3: parent.opener={ 4: bb:function(str){ 5:var div=document.createElement('div'); 6: document.body.appendChild(div); 7: div.innerHTML=str; 8: } 9: }script> 5:body> 6: 7:html>

我們可以看到，在IE6,7下，只要重置了window對象的opener為一個{}對象，在父頁面設置了iframe的window.opener為一個{}之后，在iframe里面就可以通過opener調用parent的方法，在iframe重置parent.opener為一個{}對象之后，在parent就可以調用iframe的方法。

*還有一種說法是可以設置opener為function(){}，通過new opener()來調用

總結，通過IE6,7的hack，我們可以比較好的實現postMessage在各大主流瀏覽器的兼容，以后跨域又多了一項利器。不過比較遺憾的事，重置opener之后，對于window.open打開的窗口，就不能很好的操作了。

成都網站建設 相關閱讀：Chrome瀏覽器全球份額首次超過IE 但僅保持一天

名稱欄目：如何用opener hack方式實現IE6,7完美跨域
本文地址：http://m.kartarina.com/news6/180056.html

成都網站建設公司_創新互聯，為您提供定制開發、品牌網站設計、網站營銷、商城網站、電子商務、動態網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容