利用window.name+iframe跨域获取数据详解(2)

  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';代替也是可以输出结果的,聪明的你知道区别吗?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/123452a361a741d4b6d1423ffcfba76e.html