从网上搜集了一些资料,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
<html>
<script type="text/javascript">
window.name='{"token":"用户在本站登录的token"}';
</script>
</html>
然后在另一个域名拿到这个 JSON 字符串
& lt; ! DOCTYPE html & gt; & lt;
html lang = "en" & gt; & lt;
head & gt; & lt;
meta charset = "UTF-8" & gt; & lt;
title & gt;
MY00.COM & lt;
/title>
<script>
function getData ( url, fn ) {
var oIframe = document.createElement('iframe'),
firstBtn = true,
loadFn = function () {
if ( firstBtn ) {/
/ / 导航回同域名根目录下的cross - proxy.html(空白文件,可以不存在,只是控制台会有404提示),以便获取到name值oIframe.contentWindow.location = 'cross - proxy.html';
firstBtn = false;
} else {
fn(oIframe.contentWindow.name);
oIframe.contentWindow.document.write('');
oIframe.contentWindow.close();
document.body.removeChild(oIframe);
oIframe.src = '';
oIframe = null;
}
};oIframe.src = url;
// 1. 第一次 iframe 加载完毕触发事件,执行 loadFn 函数,会将 iframe 导航回 cross-proxy.html
// 2. cross-proxy.html 加载完毕后又会触发事件,再次执行 loadFn 函数,此时会走 else
if (oIframe.attachEvent) {
oIframe.attachEvent('onload', loadFn);
} else {
oIframe.onload = loadFn;
}
document.body.appendChild(oIframe);
}
// 页面加载完毕后调用getData函数去获取数据
window.onload = function() {
getData('http: //passport.my00.com/auth.html',
function(data) {
console.log(data);
});
} & lt;
/script>
</head & gt; & lt;body & gt; & lt;
/body>
</html & gt;
以上示例完美实现跨域获取数据信息,注意数据内容传递在 2M 内.下面是用 Java Spring Boot 获取主域名的 token 并返回页面的代码
@RequestMapping("/auth")
public String index(HttpServletRequest request){
String token = LoginUtils.getToken(request);
token = token == null ? "" : token;
return "<script type=\"text/javascript\">window.name = \"{token: \"" + token + "\"\";</script>";
}
来源: http://www.bubuko.com/infodetail-2468731.html