这两天公司项目上需要实现个系统多法人选择登陆功能,纯前端解决方案,本想着很简单,无非就是做个法人选择界面,然后配置下法人系统地址下拉框,选择相应的法人跳转到指定的登陆页面即可,然后leader说要保证浏览器地址栏域名地址不可以改变,要让用户感觉这是一个系统,OK,那就用iframe呗。
嘿嘿,可是问题没有想象的那么简单,在业务系统(子页面)中很多地方用到了选择法人系统(父页面)中的一些信息,在选择法人系统(父页面)中同时也需要用到业务系统(子页面)中的一些信息,那么一般情况下的处理方式是存储cookie或者localstorage,然而cookie和localstorage都没办法做到跨主域共享数据,这就有点棘手了,研究了很久,终于找到了解决方案,那就是使用H5的postMessage API在父子页面间进行消息传递,再分别在父子系统中单独进行需要共享数据的存储,这里需要注意的是,在接收到消息时只能使用localstorage来存储,不能使用cookie,因为使用cookie来存储的话,实际上还是将数据存在了消息传递方的域下,而不是消息接收方的域下。
再弄清楚了逻辑后,下面进行具体postMessage+localstorage实现跨域数据共享的代码讲解
父页面:
window.onmessage = function (e) { //接收子页面传递来的数据
e = e || window.event;
store.set("testData",e.data); //将接收到的消息存入localstorage,e.data为数据内容,字符串格式
};
var onLoad = function () { //向子页面传递消息
var win = document.getElementById('postMessage').contentWindow;
win.postMessage(JSON.stringify({a:1,b:2}),'*');
};
var iframe = $("<iframe frameborder='0' width='100%' height='100%' id='postMessage'></iframe>"); //动态创建iframe
iframe.attr("src","http://www.xxx.com/index.html");
$("body").html(iframe);
setTimeout(function () { //延迟1s,为了确保iframe已经被加载完成,由于是动态创建的iframe,无法使用onload监听
onLoad();
},1000);
子页面
window.onmessage = function (e) { //接收父页面传递来的数据
e = e || window.event;
store.set("testData",e.data); //将接收到的消息存入localstorage,e.data为数据内容,字符串格式
};
parent.postMessage(JSON.stringify({c:3,b:4}), '*'); //向父页面传递消息
以上代码仅为具体父子页面传递消息的核心代码,并无具体业务逻辑,根据注释很容易明白,这里需要注意的一点是,上面说到了只能使用localstorage,并且这个localstorage的生命周期和以往理解的不一样,它在这里的生命周期仅存在于父子页面共同存在期间,一旦关闭浏览器即销毁,并不是永久存储。