公告:本站提供编程开发方面的技术交流与分享,打造最佳教程网,希望能为您排忧解难!

JS教程javascript解决跨域调用问题的研究

javascript解决跨域调用问题的研究

更新时间:2013-06-08 21:26:40 |

我们开发一个新项目的时候,有时候会遇到这样一种情况,有很多功能都与老的项目重合,而且页面功能重合,新项目又与老项目不是在同一个域名下,又不是同一个项目组的人负责,为了节省开发成本,这个时候可能需要通过IFRAME来嵌入老项目的页面,或者有些需求必须通过IFRAME来嵌套的情况。这个时候很多朋友可能就遇到了跨域名相互调用的问题了。

去年我就曾经遇到这样的问题,当时想了很多方案,下面通过跨域自适应宽度和高度作为例子来分享我研究的解决方案:
首先假设主域名为 http://www.goodxyx.com/demo/autoWidthHeight.html (后面简称A页面)
需要包含的页面B为 http://i.goodxyx.com/demo/autoIframe.html (后面简称B页面)
(注意:两个页面的一级域名可以不相同)

解决方案一

     1.在A页面里面写一个定时器来监听URL的锚标记变化
     2.当B页面加载后,获取到自身的宽度和高度,把参数传递给A页面的锚标记

     演示地址:http://www.goodxyx.com/demo/autoWidthHeight.html

 A页面代码如下:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="float:left;border:solid 10px gray;">
<iframe title="需要自适应的IFRAME" src="http://i.goodxyx.com/demo/autoIframe.html" id="iframe" scrolling="no" style=" border:none" frameborder="0"></iframe>
</div>

<script>
var iframe     = document.getElementById('iframe');
var lastHeight = null;
function changeIframe(){
    var sp = window.location.href.split('#');
    if(sp.length > 1 && sp[1] != lastHeight){
        var wh = sp[1].split('.');
        var width  = wh[0];
        var height = wh[1] ;
        //为了突出演示效果,考虑到边框距离所以加上8
        //可以根据项目实际情况自行调整
        iframe.style.width  = +width  + 8+ 'px';
        iframe.style.height = +height + 8 + 'px';
        lastHeight = sp[1] ;
    }
    setTimeout(changeIframe,  333);
}
changeIframe();
</script>
</body>
</html>

 B页面代码如下

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*,HTML,BODY{margin:0;padding:0;}
</style>
</head>
<body style="width:700px;height:600px;border:solid 4px red;">
<script>
window.onload = function(){
    //获取当前页面的宽度和高度,兼容性未考虑,这里只是简单说明原理     //实际项目中如果对浏览器兼容性无法把握,可以改为jQuery写法
    var width  = document.body.scrollWidth;
    var height = document.body.scrollHeight;
    //jQuery写法
    //width = $('body').width();
    //height = $('body').height();
    top.location.href =
        'http://www.goodxyx.com/demo/autoWidthHeight.html#' + width + '.' + height ;
}
</script>
</body>
</html>
     

解决方案二

     1.A域名提供一个接口页面A_app,A页面提供一个接收处理A_app传递信息的接口。
     2.在B页面中写一个方法,动态生成一个隐藏的URL为A_app页面的iframe,将信息以URL参数的方式传递给A_app页面,在A_app页面加载时,获取到URL参数传递给A页面。

     演示地址:http://www.goodxyx.com/demo/autoWidthHeight2.html

 A页面接口代码如下:

<script>

//该方法用于接收跨域的参数
function transfer(str){
    var height = str.match(/height=([0-9]+)/);
    var temp ;
    if(height){
        height = +height[1] ;
        $(goodxyx).height(height+10);
        $('#middle').height(height+18);
    }
    temp = str.match(/fun=([a-zA-Z0-9\_]+)/);
    if(temp && typeof window[temp[1]] == 'function'){
        window[temp[1]](str);
    }    
}

//下面提供两个接口给跨域的页面
//这里只是一个简单的DEMO,根据实际项目需求自行调整
function changeLeftText(str){//改变左侧内容
    var text = str.match(/text=([^&]+)/);
    if(text){
        text = decodeURIComponent(text[1]);
        $('#leftDiv').text(text);
    }
}

function changeBackgroundColor(str){//改变右侧背景色
    var text = str.match(/text=([^&]+)/);
    if(text){
        text = decodeURIComponent(text[1]);
        $('#rightDiv').css({backgroundColor:text});
    }
}

</script>

 A_app页面传递代码如下:

<!DOCTYPE>
<html>
<head>
<title>来自www.goodxyx.com跨域演示的过渡页面</title>
</head>
<body>
<SCRIPT>
    //其实这里利用了A与A_app是同一个域可以相互调用的原理进行传递参数
    //该页面只是一个接口过渡页,实际项目可以直接使用该页面代码,无需更改
    parent.parent.transfer(location.href.split('?').pop());    
</SCRIPT>
</body>
</html>

 B页面代码如下:

<script>
//向父窗口传递参数,实际项目中可以根据不同的情况适当改变
function transfer(objParam){
    var sParam=[];
    for(var i in objParam){
        sParam[sParam.length] = i + '=' + encodeURIComponent(objParam[i]);
    }
    $(['<iframe src="http://www.goodxyx.com/demo/autoIframe_app.html?',
        sParam.join('&'),
        '" style="display:none;"></iframe>'
        ].join('')
    ).appendTo('body');
}

//初始化向父窗口传递宽度和高度参数
(function(){
    var jBody = $('body');
    transfer({
        width :jBody.width(),
        height:jBody.height()
    });
})();

//绑定提交按钮事件
$('#doChange').click(function(){
    transfer({
        text:$('#text').val(),
        fun :$('#changeParentFunction').val()
    });    
});
</script>

原理说明

方案一利用A页面定时监听URL的变化来获取相关信息并进行处理,注意示例中,浏览器的兼容性还有待完善,这里旨在提供一种思路。

方案二利用同域名允许相互调用的原理进行信息交互,已经完美解决了跨域调用向父窗口传递信息,父窗口向子窗口传递信息,还需要配有方案一的思想,由读者去思考吧。该示例已经通过IE6、IE7、IE8、Firefox、Chrome、Opera浏览器的兼容性测试。

在实际项目中,很多时候需要两种思路配合使用,在同域名下有时候也需要这样的思路来解决问题。本文来源http://www.goodxyx.com/js/article/ceiu0c.html,希望对您有所帮助。

最佳教程网

最大的技术交流平台 www.goodxyx.com© CopyRight 2011-2013, All Rights Reserved

浙ICP备11033019号