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 (IE八、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>