window对象有一个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window.name是持久的存在于一个窗口载入的所有页面中的,并不会因为新的页面的载入而被重置。
下面用项目中遇到的实例,讲解如何用window.name实现跨域获取数据。
项目需求:网站A与网站B互相跳转,如用户在网站A中已登录,跳转到网站B时也要是已登录状态。
第一步、在网站A点击跳转地方,设置window.name
<a :href="sbUrl" @click="jump">申报</a>
mounted() { if (location.hostname == 'localhost') this.sbUrl = 'http://localhost:8080/#/'; //项目有分本地环境、测试环境、UAT环境、正式环境,因此跳转的路径要分情况处理 else if (location.hostname == 'uatevaluate.bysxzx.com') this.sbUrl = 'http://uattest.bysxzx.com/#/'; else if (location.hostname == 'devtest.bysxzx.com') this.sbUrl = 'http://devtest.bysxzx.com/#/'; else if (location.hostname == 'evaluate.bysxzx.com') this.sbUrl = 'http://bysxzx.com/#/'; }, methods:{ jump(){ window.name = ''; if (!localStorage.getItem('token')) { //token获取得到,说明已登录 window.name = 'logout'; } else { window.name = JSON.stringify({ userId: localStorage.getItem('userId'), token:localStorage.getItem('token'), userType:localStorage.getItem('userType'), userData:localStorage.getItem('userData'), userInfo:localStorage.getItem('userInfo'), oldHref:localStorage.getItem('oldHref'), href:location.href}); localStorage.removeItem('oldHref'); } }, }
第二步:在网站B中获取window.name
mounted: function(){ if (window.name.length > 10) { //如果window.name获取得到,就说明该页面是跨域过来的 let udata = JSON.parse(window.name); localStorage.setItem('userId', udata.userId); //项目需求是,如果已登录状态之间的跳转,需要把用户信息传递过去。因此要把用户数据提取后存到localStorage,使跳转后的网站登录接口能获取到相关的数据,实现无缝登录 localStorage.setItem('token', udata.token); localStorage.setItem('userType', udata.userType); localStorage.setItem('userData', udata.userData); localStorage.setItem('userInfo', udata.userInfo); this.isLogin = true; //控制html中登录按钮是否出现,true:不出现 window.name = ""; //把window.name清空 if (udata.oldHref) location.assign(udata.oldHref); localStorage.setItem('oldHref', udata.href); } if(localStorage.getItem('token')){ //以下两种情况与跨域无关 this.isLogin = true this.getUserInfo(localStorage.getItem('userId')) } else { this.isLogin = false } },