跨域问题——easyXDM以及JSONP

前端之家收集整理的这篇文章主要介绍了跨域问题——easyXDM以及JSONP前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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,提交数据的域名可以唯一,能区别来源,安全性较高。

猜你在找的Json相关文章