javascript跨域方案总结

一。iframe动态script

3个步骤

1.再父窗口加上document.domain（也就是调用IFRAME的那个窗口）

 

XML/HTML代码

 <scripttype="text/javascript">
 document.domain = "cnmo.com";
 </script>

2.在子窗口加上下边代码（也就是IFRAME本身里边）

 

XML/HTML代码

  <scripttype="text/javascript">
 document.domain = "cnmo.com";
 </script>
 <scripttype="text/javascript">
function iframeAutoFit()
{
     try
     {
         if(window!=parent)
         {
              var a = parent.document.getElementsByTagName("iframe");
              for(var i=0; i<a.length; i++)
             {
                  if(a[i].contentWindow==window)
                 {
                      var h1=0, h2=0, d=document, ddd=d.documentElement;
                      a[i].parentNode.style.height = a[i].offsetHeight +"px";
                      a[i].style.height = "10px";

                      if(dd && dd.scrollHeight) h1=dd.scrollHeight;
                      if(d.body) h2=d.body.scrollHeight;
                      var h=Math.max(h1, h2);

                     if(document.all){h += 4;}
                     if(window.opera){h += 1;}
                      a[i].style.height = a[i].parentNode.style.height = h +"px";
                 }
             }
         }
     }
     catch (ex){}
}
if(window.attachEvent)
{
     window.attachEvent("onload",   iframeAutoFit);
}else if(window.addEventListener)
{
     window.addEventListener('load',   iframeAutoFit,   false);
}
 </script>

 

3.细节问题 IFRAME外边加个DIV，否则火狐下有问题，宽度设置好 否则他们都有问题

 

XML/HTML代码

 <divstyle="width:100%;margin:0 0 10px 0;">
 <iframealign='middle'src='http://comments.cnmo.com/iframe_comment.php?kindid=9&articleid=<?=$pic_id?>&tw=620&style=11&font_num=180&pagesize=3'frameborder='0'marginwidth='0'marginheight='0'width='100%'scrolling='no'height='450px'style='margin-top:15px;'></iframe>
 </div>

这样就好了 有问题 也是微调下就好了

二。jsonp

var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")}; 

$.ajax({ 
async:false, 
url: http://跨域的dns/document!searchJSONResult.action, 
type: "GET", 
dataType: 'jsonp', 
jsonp: 'jsoncallback', 
data: qsData, 
timeout: 5000, 
beforeSend: function(){ 
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 
}, 
success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
if(json.actionErrors.length!=0){ 
alert(json.actionErrors); 
} 
genDynamicContent(qsData,type,json); 
}, 
complete: function(XMLHttpRequest, textStatus){ 
$.unblockUI({ fadeOut: 10 }); 
}, 
error: function(xhr){ 
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 
//请求出错处理 
alert("请求出错(请检查相关度网络状况.)"); 
} 
}); 

 

 

 注意:$.getJSON(" http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",
function(json){
if(json.属性名==值){
// 执行代码
}
});
这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了.
这样,jquery就会拼装成如下的url get请求
http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15

在响应端(http://跨域的dns/document!searchJSONResult.action),
通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501
然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")";
jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组);
这样就达到了跨域数据交换的目的.

jsonp的最基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.
如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，
我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。

jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的，获取跨域服务器上的json数据后，回调的函数

Jsonp原理：

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

注意,jquey是不支持post方式跨域的.
为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..

client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案.
3.ajax

 

最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题，但是放到二级域和其他域下浏览器直接就弹出提示框:“该页正在访问其控制范围之外的数据，这有些危险，是否继续" 


1.什么引起了ajax跨域不能的问题 
ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。 

2.有什么完美的解决方案么？ 
没有。解决方案有不少，但是只能是根据自己的实际情况来选择。 

具体情况有: 
一、本域和子域的相互访问: www.aa.com和book.aa.com 
二、本域和其他域的相互访问: www.aa.com和www.bb.com 用 iframe 
三、本域和其他域的相互访问: www.aa.com和www.bb.com 用 XMLHttpRequest访问代理 
四、本域和其他域的相互访问: www.aa.com和www.bb.com 用 JS创建动态脚本 


解决方法： 
一、 如果想做到数据的交互，那么www.aa.com和book.aa.com必须由你来开发才可以。可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = "aa.com"，这样就可以统一域了，可以实现跨域访问。就和平时同一个域中镶嵌iframe一样，直接调用里面的JS就可以了。（这个办法我没有尝 试，不过理论可行） 


二、当两个域不同时,如果想相互调用，那么同样需要两个域都是由你来开发才可以。用iframe可以实现 数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是http://domian/web /a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新，可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏 览器只要改变hash就会记录历史，你在前进和后退时就需要处理，非常麻烦。不过再做简单的处理时还是可以用的，具体的代码我再下面有下载。大体的过程是 页面a和页面b在不同域下,b通过iframe添加到a里，a通过JS修改iframe的hash值，b里面做一个监听（因为JS只能修改hash，数据 是否改变只能由b自己来判断），检测到b的hash值被修改了，得到修改的值，经过处理返回a需要的值，再来修改a的hash值（这个地方要注意，如果a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是无 法取得数据的，同样报没有权限的错误，需要a把这个传过来，所以也比较麻烦），同样a里面也要做监听，如果hash变化的话就取得返回的数据，再做相应的 处理。 


三、这种情形是最经常遇到的，也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一个，也 就是另外一个是别人的，人家告诉你你要取得数据就访问某某连接参数是什么样子的，最后返回数据是什么格式的。而你需要做的就是在你的域下新建一个网页，让 服务器去别人的网站上取得数据，再返回给你。domain1下的a向同域下的GetData.aspx请求数据，GetData.aspx向 domain2下的 ResponseData.aspx发送请求,ResponseData.aspx返回数据给GetData.aspx, GetData.aspx再返回给a,这样就完成了一次数据请求。GetData.aspx在其中充当了代理的作用。具体可以看下我的代码。 


四、 这个和上个的区别就是请求是使用<script>标签来请求的，这个要求也是两个域都是由你来开发才行。原理就是JS文件注入，在本域内的a 内生成一个JS标签，它的SRC指向请求的另外一个域的某个页面b，b返回数据即可，可以直接返回JS的代码。因为script的src属性是可以跨域 的。具体看代码，这个也比较简单。 

code: 
http://www.live-share.com/files/300697/Cross_The_Site_Test_code.rar.html 
(csdn不能粘贴附件么？) 

总结： 
第一种情况：域和子域的问题，可以完全解决交互。 
第二种情况：跨域，实现过程非常麻烦，需要两个域开发者都能控制，适用于简单交互。 
第三种情况：跨域，开发者只控制一个域即可，实现过程需要增加代理取得数据，是常用的方式。 
第四种情况：跨域，两个域开发者都需要控制，返回一段js代码。 

PS:代码自己按照情况修改即可。 

这是拿别人的参考链接，老美的文章比较多。 

1. Security Considerations: Dynamic HTML 
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/sec_dhtml.asp 

2. About Cross-Frame Scripting and Security 
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/xframe_scripting_security.asp 

3. Cross-Domain Proxy 
http://ajaxpatterns.org/Cross-Domain_Proxy 

4. Cross Domain XMLHttpRequest using an IFrame Proxy 
http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75 

5. Back Button Support for Atlas UpdatePanels 
http://www.nikhilk.net/BackButtonSupport.aspx 

6. Cross-document messaging hack 
http://blog.monstuff.com/archives/000304.html 

7. Building Mash-ups with "Atlas" 
http://atlas.asp.net/docs/Walkthroughs/DevScenarios/bridge.aspx 

8. Calling web services hosted outside of your application with “Atlas” 
http://blogs.msdn.com/federaldev/archive/2006/07/31/684229.aspx 

http://www.federaldeveloper.com/Shared%20Documents/Presentations%20by%20Marc% 

20Schweigert/CallAtlasWebServiceInDifferentProject.zip 

9. AJAX Tip: Passing Messages Between iframes 
http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=3b03cf9d-b589-4838-806e-64efcc0a1a15 

10. OSCON Cross-site Ajax Slides 
http://blog.plaxo.com/archives/2006/07/oscon_crosssite.html 

http://www.plaxo.com/css/api/Joseph-Smarr-Plaxo-OSCON-2006.ppt 

11. OSCON 2006: Cross-site Ajax 
http://www.sitepoint.com/blogs/2006/07/28/oscon-2006-cross-site-ajax/