跨域问题——easyXDM以及JSONP

来源：互联网发布：离线全文翻译软件编辑：程序博客网时间：2024/06/09 21:00

最近在跨域问题的问题中，查找了一些资料。实现方法有很多。

PPT文档：http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier 里面详细介绍了基本的实现方法。

下面转载easyXDM以及JSONP 的方法：

内容来自：http://blog.sina.com.cn/s/blog_61b7b4e90100xcwz.html

最近在做项目的时候遇到很多跨域的问题。说下我的解决方案：
1.JSONP单纯获取数据的话，并且希望能实现不调用动态程序的情况下，可以考虑使用JSONP来解决。
具体原理就是让浏览器通过script的src属性来动态调取。
代码：
functionloadContent(content) {

var s=document.createElement_x('SCRIPT');
s.src="http://test.com/test.js";
document.body.appendChild(s);
}页面中给onclick（）绑定此函数即可。而在动态调用的JS文件中，返回如下格式的数据：

functionname(data);其中functionname为原来已经加载的函数（本域）类似于：function functionname(data){  document.getElementByIdx_x('container').innerHTML=data;}这样就在引用近数据后，执行了对应的数据。优点：可以不使用动态程序，简单易用。缺点：事实上使用的是GET方式，其保密性以及安全性甚至传输数据大小都是问题，并且此方式解决了跨域问题，所以给跨站攻击带来了方便，不建议用在提交数据处。2.easyXDM遇到的另外一个问题是，跨域调节父框架的高度。最终找到的一个方案是easyXDM.easyXDM是一个较为成熟的js跨域解决方案，并且其对各种浏览器都有不同的解决方案，兼容性较好，在ie6,7中使用的是flash，其他浏览器使用的是：PostMessageTransport.网站：http://easyxdm.net/wp/easyXDM的使用使用了3个页面：当前查看页面，中间页面，iframe嵌套页面。我这里直接上代码：查看页面(domain1.com)index.html<html><head><script src="easyXDM.js" type="text/javascript"></script><script type="text/javascript" language="javascript">    var transport = new easyXDM.Socket(    {        remote: "http://domain2/middle.html",        container: "embedded",        onMessage: function (message, origin)         {            this.container.getElementsByTagName_r("iframe")[0].style.height = message;        }    });</script></head><body>    <div id="embedded"></div></body>中间页面(domain2.com)middle.html<html>    <head>        <title>Frame</title>        <script type="text/javascript" src="easyXDM.js">        </script>        <script type="text/javascript">            var iframe;            var socket = new easyXDM.Socket({                swf: "easyxdm.swf",                onReady: function(){                    iframe = document.createElement_x("iframe");                    iframe.frameBorder = 0;                    document.body.appendChild(iframe);                    iframe.src = "index.html";                },                onMessage: function(url, origin){                    iframe.src = url;                }            });        </script>        <style type="text/css">            html, body {                overflow: hidden;                margin: 0px;                padding: 0px;                width: 100%;                height: 100%;            }            iframe {                width: 100%;                height: 100%;                border: 0px;            }        </style>    </head>    <body>    </body></html>被嵌套页面(domain2.com)index.html<html>    <head>        <title>Frame</title>    </head>    <body>        <script type="text/javascript">            window.onload = function(){                document.getElementByIdx_x("test").onclick=function(){                    document.getElementByIdx_x('test').innerHTML="1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>";                    parent.socket.postMessage(parseInt(document.body.scrollHeight));                }            };        </script>        <div style="background:#0f0;" id="test">            1<br/>            1<br/>        </div>    </body></html>

文中用到了另外两个资源：
easyXDM.js
easyxdm.swf 到托管的https://github.com/oyvindkinsey/easyXDM下载

优点：兼容性好。其实ajax跨域的方案easyXDM做的也较为成熟。安全性高，并且如果使用iframe，提交数据的域名可以唯一，能区别来源，安全性较高。