js iframe跨域訪問

1.什么是跨域？

2.前台解決跨域幾種方法

　　2.1 動態創建script

　　2.2 使用document.domain

　　2.3使用HTML5新屬性postMessage

　　2.4 利用iframe和location.hash

 

 

什么是跨域？

....................................................................................................................................................................................

Javascript處於安全方面的考慮（同源策略限制），不允許跨域調用其他頁面的對象。

也就是“Domains,protocols,posts”不一樣就是跨域。

“Domains”就是指的域名，

“protocols”就是協議，分為http和https，

“ports”就是端口名稱

需要注意的是：

　　1.如果是protocols和ports不一致造成的跨域，前台沒有辦法解決

　　2.域只通過URL的首部，也就是protocols+domain+port來判斷是否跨域，不會去判斷domain是否對應着相同的IP地址

　　　　因此就出現如下幾種跨域情況：

 

 

URL	說明	是否跨域
http://www.a.com/a.js http://www.a.com/b.js	同protocol,domain,port	允許
http://www.a.com/a/a.js http://www.a.com/b/b.js	同protocol,domain,port,不同文件夾	允許
http://www.a.com:8000/a.js http://www.a.com/b.js	同protocol,domain,不同port（默認port：80）	不允許
http://www.a.com/a.js https://www.a.com/b.js	同domain,port,不同protocol	不允許
http://www.a.com/a.js http://192.168.82.45/b.js	同protocol,port,不同domain	不允許
http://www.a.com/a.js http://child.a.com/b.js	主域相同（a.com）,子域不同（www,child）	不允許
http://www.a.com/a.js http://a.com/b.js	一級域名相同，二級域名不同（同上）	不允許
http://www.a.com/a.js http://www.b.com/b.js	同protocol,port,不同domian	不允許

解決方法

......................................................................................................................................................................................
1.動態創建script標簽

　　雖然瀏覽器默認阻止跨域請求，但是不阻止在頁面中引用其他域的文件。

　　因此可以動態添加script標簽。JSONP就是利用這一原理來實現ajax跨域的

 

2.通過修改docment.domain來實現跨域

　　該方法必須是在 同主域，不同子域的情況下才生效

　　比如：morningstar.com 和test.morningstar.com

只要把兩個頁面 的document.domain都指向主域就可以了，比如document.domain='morningstar.com'

<!-- morningstar.com/parent.html -->
<iframe id="ifr" src="http://test.morningstar.com/MarketBarometer/html/test.html" width="200px"></iframe>
<script>document.domain = 'morningstar.com';
functionaa(str){
    console.log(str);
}
window.onload = function(){
    document.getElementById('ifr').contentWindow.bb('aaa');
}
</script>
<!--test.morningstar.com/test.html --><script>document.domain = 'morningstar.com';
functionbb(str){
    console.log(str);
}

parent.aa('bbb');
</script>

 

3.通過HTML5 postMessage

　　不同域之間的跨域請求  使用postMessage。postMessage是HTML5新增的方法，簡單易用高大上

　　比如：test.com 和qsstage.morningstar.com

.postMessage(message,targetOrigin)參數說明

message: 是要發送的消息，類型為 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范圍，不限制請使用 '*'

'message',function(e)回調函數第一個參數接受Event對象，有三個常用屬性：

data: 消息
origin: 消息來源地址
source: 源 DOMWindow 對象

一個簡單的父頁面qsstage.morningstar.com/parent.html 和子頁面 test.com/test.html建立通信

<!-- qsstage.morningstar.com.com/parent.html --><iframeid="ifr"src="http://bar.com/b.html"></iframe><script>window.onload = function(){
    var ifr = document.querySelector('#ifr');
    ifr.contentWindow.postMessage({a: 1}, '*');
}
window.addEventListener('message', function(e){
    console.log('bar say: '+e.data);
}, false);
</script>
<!-- test.com/test.html -->
window.addEventListener('message', function(e){
    console.log('foo say: ' + e.data.a);
    e.source.postMessage('get', '*');
}, false)

 

  

 

4.iframe+location.hash解決跨域

　　利用代理頁面來解決HTML iframe跨域訪問  使用location.hash.

　　通過URL傳遞數據。

　　結構關系：chart/com

                      ---parent.html

                      ---poxy.html

　　　　　　test.com

                　　---child.html

一個簡單的父頁面chart.com/parent.html 和子頁面 test.com/child.html建立通信,通過chart.com/poxy.html實現跨域訪問

<!-- chart.com/parent.html -->
<iframe id="test1" src="http://test.com/test.html" width="100%" height="200px"></iframe>
    <script>
        function callback(data) {
            console.log(data);
        }
    </script>

 

<!-- chart.com/poxy.html -->
<script type="text/javascript">
        window.onload = function () {
            var data = location.hash.substr(1);
            data = eval("(" + decodeURIComponent(data) + ")");
            top.document.getElementById("test1").style.height = data.height + 'px';
            //調用父頁面方法，可不寫
            top.callback(data);
        }
    </script>

 

<!-- test.com/child.html -->
 <div style="height:400px">
        <p>我是子頁面</p>
    </div>
    <script type="text/javascript">
       
        window.onload = function () {
            if (!document.getElementById("crossFrame")) {
                var iframe = document.createElement('iframe');
                iframe.setAttribute('style', 'width:100%');
                iframe.setAttribute('src', 'http://chart.com/poxy.html');
                var height = document.documentElement.scrollHeight;
                var data = '{height:' + height + '}';
                //通過參數傳遞高度heights
                iframe.src = 'http://chart.com/poxy.html#' + data;
                document.body.appendChild(iframe);
            } else {
                document.getElementById("crossFrame").src = url;
            }
        }
    </script>