2022-07-17 分類: 網站建設
有時我們做一個項目時,有需要跨域請求和處理一些大數據量得數據,對于服務端提交的數據非常的之大,get的URL長度限制滿足不了需求,又由于跨域的影響,一直很頭痛數據傳輸的問題。于是乎,上網搜了搜一些跨域的解決方案,無非了iframe嵌iframe,通過window.name或者hash,做跳板,都受到url長度的限制,不是很理想。我們都知道在HTML5中,提供了一種postMessage的消息機制,可以在不同域的頁面上,互相通過window.postMessage(datastring,’limitDomain’)的方式傳遞消息。在需要觸發的頁面注冊onMessage事件,event的data屬性就是傳遞datastring文本。再配合老道的JSON.parse就可以好的傳遞json格式的對象了。可惜的是目前PostMessage只在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.comtest.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.newbst.com/news6/180056.html
成都網站建設公司_創新互聯,為您提供虛擬主機、網頁設計公司、建站公司、微信小程序、關鍵詞優化、App開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容