首页 > 代码库 > js iframe跨域访问

js iframe跨域访问

2024-08-17 04:12:36   225人阅读

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 = http://www.mamicode.com/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 = http://www.mamicode.com/‘{height:‘ + height + ‘}‘;
                //通过参数传递高度heights
                iframe.src = http://www.mamicode.com/‘http://chart.com/src/html/poxy.html#‘ + data;
                document.body.appendChild(iframe);
            } else {
                document.getElementById("crossFrame").src =http://www.mamicode.com/ url;
            }
        }
    </script>

 

js iframe跨域访问


联系
我们