从网上搜集了一些资料，window.name 传输技术，关于window.name的这样一个特性：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。换句话说，name属性不会因为页面的url变化而变化，这就给跨域提供了机会。原本是 Thomas Frank 用于解决 cookie 的一些劣势（每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等）而发明的（详细见原文：《Session variables without cookies》），后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ，并引入到了 Dojo （dojox.io.windowName），用来解决跨域数据传输问题。
本示例通过 iframe 窗口重载，成功将 window.name 所需对象以字符串形式跨域传递到另外一个域名下，非常适用于前端跨域实现一站式登录。
首先我们要创建一个登录状态返回页面 passport.my00.com/auth.html
1 <html> 2 <script type="text/javascript"> 3 window.name=‘{"token":"用户在本站登录的token"}‘; 4 </script> 5 </html>
然后在另一个域名拿到这个 JSON 字符串
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>MY00.COM</title> 6 <script> 7 function getData ( url, fn ) { 8 var oIframe = document.createElement(‘iframe‘), 9 firstBtn = true, 10 loadFn = function () { 11 if ( firstBtn ) { 12 // 导航回同域名根目录下的 cross-proxy.html（空白文件，可以不存在，只是控制台会有 404 提示），以便获取到 name 值 13 oIframe.contentWindow.location = ‘cross-proxy.html‘; 14 firstBtn = false; 15 } else { 16 fn( oIframe.contentWindow.name ); 17 oIframe.contentWindow.document.write(‘‘); 18 oIframe.contentWindow.close(); 19 document.body.removeChild(oIframe); 20 oIframe.src = ‘‘; 21 oIframe = null; 22 } 23 }; 24 25 oIframe.src = url; 26 27 // 1. 第一次 iframe 加载完毕触发事件，执行 loadFn 函数，会将 iframe 导航回 cross-proxy.html 28 // 2. cross-proxy.html 加载完毕后又会触发事件，再次执行 loadFn 函数，此时会走 else 29 if ( oIframe.attachEvent ) { 30 oIframe.attachEvent( ‘onload‘, loadFn ); 31 } else { 32 oIframe.onload = loadFn; 33 } 34 35 document.body.appendChild(oIframe); 36 } 37 38 39 // 页面加载完毕后调用getData函数去获取数据 40 window.onload = function () { 41 getData( ‘http://passport.my00.com/auth.html‘, function ( data ) { 42 console.log( data ); 43 } ); 44 } 45 </script> 46 </head> 47 <body> 48 </body> 49 </html>
以上示例完美实现跨域获取数据信息，注意数据内容传递在 2M 内。下面是用 Java Spring Boot 获取主域名的 token 并返回页面的代码
1 @RequestMapping("/auth") 2 public String index(HttpServletRequest request){ 3 String token = LoginUtils.getToken(request); 4 token = token == null ? "" : token; 5 return "<script type=\"text/javascript\">window.name = \"{token: \"" + token + "\"}\";</script>"; 6 }
