window.name的值是字符串形式,也是需要传递给客户端的数据(当然如果有需要服务端也可以先处理传过来的数据,这里仅为只有数据回传),有需要自己再去解析(如字符串->json数据)。
index.html页面,我把方法封装成了函数:
<body> <script type="text/javascript"> function crossDomain(url, fn) { iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { fn(iframe.contentWindow.name); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html'; } }; iframe.src = url; document.body.appendChild(iframe); } // 调用 // 服务器地址 var url = 'http://localhost:8080/data.php'; crossDomain(url, function(data) { // 处理数据 data就是window.name的值(string) var data = JSON.parse(iframe.contentWindow.name); console.log(data); }); </script> </body>
这里还有一点小问题,ie的兼容(iframe的onload ie下似乎要用attachEvent,以及json对于ie的兼容),有兴趣的朋友自己去研究了(可以参考下参考文章);另外proxy代理页面可以没有这个文件,会报404但是不影响功能(但是路径一定要和index页面同源)。
还有一点值得思考的是iframe的src重定向的时候,代码:
iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html';
这时iframe.src指向的还是服务端页面,这里的代码如果用iframe.src = 'http://localhost:81/cross-domain/proxy.html';代替也是可以输出结果的,聪明的你知道区别吗?