iframe实现微前端

确实一眼看上去好像实现了微前端，实则却没有解决微前端里面的几个问题。

兄弟子项目window的区分，如一个使用vue1.x一个使用vue2.x；
父子项目window的区分，如一个使用vue1.x,一个使用vue2.x；
有一些微前端限制了实现技术栈，比如vue实现微前端，react实现微前端；
最为著名的当属阿里的乾坤，乾坤引入了沙箱概念，解决了项目切换的时候window不污染下一个项目的问题，但是只能解决同时只存在一个项目的情况，如果有多个项目同时需要使用到window就无能为力了；这个时候大家肯定会想，为什么不用iframe呢？

iframe

iframe可以看做真正的一个沙箱，例外的window完全隔离，不会相互影响，可以说是完美的实现，但是为什么网友们不使用呢？这篇文章有分析；

总结起来就是，样式不好控制，页面刷新不能够被记忆。看上去好像是绝路，毕竟第一个问题，虽然样式不好控制，但是我们至少还能控制，只是毕竟麻烦，第二个问题如果解决不了就完全预示着这个东西完全不能用于微前端了，那我们如果非要走这条路最终就落入到怎么解决掉第二个问题上来了，既然如此，那就只能在这上面突破了。

优点：
有安全沙箱

缺点：
1.样式不好控制
2.刷新首页丢失，要配合localStorage存储
3.iframe会阻塞主页面的onload事件；
4.搜索引擎检索程序无法解读这种页面，不利于SEO；
5.弹窗无法跨iframe，只能在本iframe页面

网站header和footer若是只写在首页，body用iframe的话，点击浏览器的刷新按钮，页面往往会跳转到首页，无法刷新当前页面，这给用户带来了很不好的用户体验，所以最好不要应用iframe，页面的header和footer每个页面里都写，但已经用了，又想改变这一现状，那就只能通过代码来控制刷新的页面了。

第一步：common.js里加入如下代码（自动抓取当前页面的路径，存储进session，带参的话，参数也要一并抓取）。

function refreshPage(){
   var sessionStorage=window.sessionStorage;
   var index=location.href.lastIndexOf("/");
   if(index!=-1){
   	   var href=location.href.substring(index+1);
       sessionStorage.setItem("refreshPage",href);
   }
}

第二步：子页面引入common.js，在onload事件里调用refreshPage方法。

window.onload = function(){
         refreshPage();
      }

第三步：然后在父页面根据sessionStorage里存储的当前页面的路径，设置iframe的src，并且让导航选中当前的模块，大功告成。

function setIframePage(){
    	 var sessionStorage=window.sessionStorage;
    	 var refreshPage=sessionStorage.getItem("refreshPage");
    	 if(refreshPage!=null&&refreshPage!=""&&refreshPage!=undefined){
    	 	document.getElementById("midFraim").src=refreshPage;
    	 	$("#navigation").removeClass("active");
    	 	if(refreshPage=="Technology.html"){
    	 		$('#Technology').addClass("active");
    	 	}else if(refreshPage=="main.html"){
    	 		$('#main').addClass("active");
    	 	}else if(refreshPage=="findItem.html"||refreshPage.indexOf("findItem_detail.html")!=-1){
    	 		$('#findItem').addClass("active");
    	 	}else if(refreshPage=="findAccept.html"||refreshPage.indexOf("FindAcceptDetail.html")!=-1){
    	 		$('#findAccept').addClass("active");
    	 	}else if(refreshPage=="trends.html"){
    	 		$('#trends').addClass("active");
    	 	}else if(refreshPage=="Equipment.html"){
    	 		$('#Equipment').addClass("active");
    	 	}else if(refreshPage=="discuz.html"||refreshPage=="SendTie.html"||
    	 	    refreshPage.indexOf("DiscuzDetail.html")!=-1||
    	 	    refreshPage.indexOf("discuzList.html")!=-1){
    	 		$('#discuz').addClass("active");
    	 	}
    	 }else{
    	 	$('#main').addClass("active");
    	 	document.getElementById("midFraim").src="main.html";
    	 }
    }
    
    window.οnlοad=function(){
    	setIframePage();
    }