JS跨域总结 - 站长资源库


答案：javascript跨域有两种情况： 
1、基于同一父域的子域之间，如：a.c.com和b.c.com 
2、基于不同的父域之间，如：www.a.com和www.b.com 
3、端口的不同，如：www.a.com:8080和www.a.com:8088 
4、协议不同，如：http://www.a.com和https://www.a.com 
对于情况3和4，需要通过后台proxy来解决，具体方式如下： 
a、在发起方的域下创建proxy程序 
b、发起方的js调用本域下的proxy程序 
c、proxy将请求发送给接收方并获取相应数据 
d、proxy将获得的数据返回给发起方的js 
发起方页面代码如下： 
复制代码 代码如下:
 
<form id="form1" runat="server"> 
<div> 
<input type="text" id="txtSrc" value="http://www.gzsums.edu.cn/webclass/html/html_design.html" style="width: 378px" /> 
<input id="btnProxy" type="button" value="通过Proxy获取数据" onclick="GetDataFromProxy();" /><br /> 
<br /> 
<br /> 
</div> 
<div id="divData"></div> 
</form> 
</body> 
<script language="javascript" type="text/javascript"> 
function GetDataFromProxy() { 
var src = document.getElementById('txtSrc').value; 
var request = null; 
if (window.XMLHttpRequest) { 
request = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) { 
request = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
request.onreadystatechange = function() { 
var ready = request.readyState; 
var data = null; 
{ 
if (ready == 4) { 
data = request.responseText; 
document.getElementById('divData').innerHTML = data; 
} 
else { 
document.getElementById('divData').text = "Loading"; 
} 
} 
} 
var url = "Proxy.ashx?src=" + escape(src); 
request.open("get",url,false); 
request.send(null); 
} 
</script> 
 
发起方Proxy代码如下： 
复制代码 代码如下:
 
using System.Data; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Web.Services.Protocols; 
using System.Xml.Linq; 
using System.IO; 
using System.Net; 
using System.Text; 
namespace WebApplication1 
{ 
/// <summary> 
/// Summary description for $codebehindclassname$ 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
public class Proxy : IHttpHandler 
{ 
const int BUFFER_SIZE = 8 * 1024; 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string src = context.Request["src"]; 
WebRequest wr = WebRequest.Create(src); 
WebResponse wres = wr.GetResponse(); 
Encoding resEncoding = System.Text.Encoding.GetEncoding("gb2312"); 
StreamReader sr = new StreamReader(wres.GetResponseStream(), resEncoding); 
string html = sr.ReadToEnd(); 
sr.Close(); 
wres.Close(); 
context.Response.Write("<br/><br/><br/><br/>"); 
context.Response.Write(html); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
} 
 
而情况1和2除了通过后台proxy这种方式外，还可以有7种办法来解决： 
1、document.domain+iframe（只能解决情况1）： 
a、在发起方页面和接收方页面设置document.domain，并将值设为父域的主域名(window.location.hostname) 
　 b、在发起方页面创建一个隐藏的iframe，iframe的源是接收方页面 
c、根据浏览器的不同，通过iframe.contentDocument || iframe.contentWindow.document来获得接收方页面的内容 
d、通过获得的接收方页面的内容来与接收方进行交互 
这种方法有个缺点，就是当一个域被攻击时，另一个域会有安全漏洞出现。 
发起方页面代码如下： 
复制代码 代码如下:
 
<body> 
<div> 
<input type="text" id="txtSrc" value="http://b.a.com/DomainTest2.htm" style="width: 378px" /> 
<input id="btnDomain" type="button" value="通过Domain获取数据" onclick="GetDataFromDomain();" /><br /> 
<br /> 
<br /> 
</div> 
<div id="divData"></div> 
</body> 
<script language="javascript" type="text/javascript"> 
document.domain = 'a.com'; 
var src = document.getElementById('txtSrc').value; 
var ifr = document.createElement('iframe'); 
ifr.src = src; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
function GetDataFromDomain() { 
var doc = ifr.contentDocument || ifr.contentWindow.document; 
alert(doc.getElementById("data").value); 
} 
</script> 
 
接收方页面代码如下： 
复制代码 代码如下:
 
<body> 
<input type="hidden" id="data" value="Cross Domain" style="width: 378px" /> 
</body> 
<script language="javascript" type="text/javascript"> 
document.domain = 'a.com'; 
</script> 
 
2、动态创建script： 
　 a、在发起方页面动态加载一个script，script的URL指向接收方的一个处理地址（后台），该地址返回的javascript方法会被执行，另外URL中可以传入一些参数，该方法只支持GET方式提交参数。 
　 b、加载的script可以在调用跨域js方法后再做一些自己的处理 
发起方页面的代码如下： 
复制代码 代码如下:
 
<head> 
<title>Script Test</title> 
<script language="javascript" type="text/javascript"> 
function load_script(callback){ 
var head = document.getElementsByTagName('head')[0]; 
var script = document.createElement('script'); 
var src = document.getElementById('txtSrc').value; 
script.type = 'text/javascript'; 
script.src = src; 
//借鉴了jQuery的script跨域方法 
script.onload = script.onreadystatechange = function(){ 
if((!this.readyState||this.readyState === "loaded"||this.readyState === "complete")){ 
callback && callback(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
if ( head && script.parentNode ) { 
head.removeChild( script ); 
} 
} 
}; 
// Use insertBefore instead of appendChild to circumvent an IE6 bug. 
head.insertBefore( script, head.firstChild ); 
} 
</script> 
</head> 
<body> 
<input type="text" id="txtSrc" value="http://www.b.com/scripttest.aspx" style="width: 378px" /> 
<input type="button" value="通过动态创建script标签来获取数据" onclick="load_script(function(){alert('动态加载script标签成功')})"/> 
</body> 
 
接收方服务器端代码如下： 
复制代码 代码如下:
 
protected void Page_Load(object sender, EventArgs e) 
{ 
Response.Clear(); 
Response.ContentType = "application/x-javascript"; 
Response.Write(String.Format(@"alert('{0}');", DateTime.Now)); 
Response.End(); 
} 
 
3、location.hash+iframe： 
　 a、发起方创建一个隐藏的iframe，iframe的源指向接收方的页面，并通过接收方页面的hash值来传送数据 
　 b、发起方创建一个定时器，定时检查自己的location.hash并作相应的处理 
c、接收方创建一个隐藏的iframe，iframe的源指向发起方所在域的一个代理页面，并将接收方根据发起方传入的数据而处理后的数据通过代理页面的hash值来传送 
d、接收方创建一个定时器，定时检查自己的location.hash并作相应的处理 
e、代理页面创建一个定时器，定时检查自己的location.hash并同步更新发起方页面的hash值 
www.a.com/a.html#aaa，其中#aaa就是location.hash值 
发起方页面代码如下：
上一个：说说JSON和JSONP 也许你会豁然开朗
下一个：IE中jquery.form中ajax提交没反应解决方法分享
更多图片编程知识: