这种方法比较巧妙，引用圆心的解释，name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
具体例子依旧如上，同时也是需要一个代理页面。
a.com/get.html请求b.com/data.html，首先get.html创建一个iframe，src指向data.html，然后监听iframe的onload事件。与此同时，在data.html设置window.name = data;把window.name赋值。然后onload事件后马上把iframe的跳到本地a.com/proxy.html。因此window.name就共享到了src为proxy.html的找个iframe中，接下来，就是同源间获取值的事了。
a.com/get.html
var state = 0, iframe = document.createElement('iframe'), iframe.src = 'http://b.com/data.html"; iframe.style.display = 'none'; loadfn = function() { if (state === 1) { var data = iframe.contentWindow.name; console.log(data); } else if (state === 0) { state = 1; //跳到proxy.html iframe.contentWindow.location = "http://a.com/proxy.html"; } }; if (iframe.attachEvent) { iframe.attachEvent('onload', loadfn); } else { iframe.onload = loadfn; } document.body.appendChild(iframe); a.com/proxy.html // proxy.html的操作主要是删除get.html的iframe，避免安全问题发生 iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); b.com/data.html var data = "hello,tqtan"; window.name = data;
5、 postMessage()
html5的新方法postMessage()优雅地解决了跨域，也十分容易理解。
发送方调用postMessage()内容，接受方监听onmessage接受内容即可。
假设发送方为a.com/send.html，接受方为b.com/receive.html。
a.com/send.html
var iframe = document.createElement("iframe"); iframe.src = "http://b.com/receive.html"; document.body.appendChild(iframe); iframe.contentWindow.postMessage("hello","http://b.com"); b.com/receive.html window.addEventListener('message', function(event){ // 通过origin属性判断消息来源地址 if (event.origin == 'http://a.com') { console.log(event.data); console.log(event.source);//发送源的window值 } }, false);
6、CORS（后台实现）
以上5点都是前端实现的跨域，但是后台参与会让跨域更容易解决，也就是用CORS。
CORS是Cross-Origin Resource Sharing的简称，也就是跨域资源共享。它有多牛逼？之前说JsonP只能get请求，但CORS则可以接受所有类型的http请求，然而CORS只有现代浏览器才支持。
怎样使用？前端只需要发普通ajax请求，注意检测CORS的支持度。引用自蒋宇捷。
function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // 此时即支持CORS的情况 // 检查XMLHttpRequest对象是否有“withCredentials”属性 // “withCredentials”仅存在于XMLHTTPRequest2对象里 xhr.open(method, url, true); } else if (typeof!= "undefined") { // 否则检查是否支持XDomainRequest，IE8和IE9支持 // XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式 xhr = new XDomainRequest(); xhr.open(method, url); } else { // 否则，浏览器不支持CORS xhr = null; } return xhr; } var xhr = createCORSRequest('GET', url); if (!xhr) { throw new Error('CORS not supported'); }
与此同时，服务器端只需要设置Access-Control-Allow-Origin头即可。
java中你只需要设置
复制代码 代码如下:
response.setHeader("Access-Control-Allow-Origin", "*");
为了安全，也可以将*改为特定域名，例如a.com。
您可能感兴趣的文章: