js iframe跨域訪問

標籤：

1.同主域下不同子域之間的跨域請求  使用document.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>

 

2.不同域之間的跨域請求  使用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)

 

  

 

3.利用代理頁面來解決HTML iframe跨域訪問  使用location.hash.通過URL傳遞資料。結構關係：src                       ---parent.html                      ---poxy.html                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/MarketBarometer/html/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/src/html/poxy.html‘);                var height = document.documentElement.scrollHeight;                var data = ‘{height:‘ + height + ‘}‘;                //通過參數傳遞高度heights                iframe.src = ‘http://chart.com/src/html/poxy.html#‘ + data;                document.body.appendChild(iframe);            } else {                document.getElementById("crossFrame").src = url;            }        }    </script>

 

js iframe跨域訪問