原生JS配置后台系统的导航路由

后台系统一般情况下不考虑SEO优化服务,仅作为数据填报及展示等,所以目前一般都使用前后端分离模式进行开发,像Vue、react等框架都可实现,但数据获取的过程不利于搜索引擎抓取数据,所以目前这种模式多用于后台服务,当然像vue等也有解决seo优化的方案。

 

原生JS项目的应用场景还是在ie的兼容及稳定性上,今天分享一套支持ie8的原生JS项目,写的非常简单,就只有个导航,其实是回想起曾经做过的java混合开发的模式,使用了iframe的嵌套。

注:之所以只能兼容ie8版本是因为引入了layui(比较懒用了layui的导航偷个懒),自己写导航的话还可以再向下兼容的。

 

谷歌演示图:



ie演示图:

 

原生JS也是一样可以做前后端分离的,关于跨域问题,前端可以使用nginx代理解决,也可以通过后端完全放开权限。

 

主要代码:

    <script type="text/javascript">
	    // 页面dom创建完成后执行此函数
		window.onload = function(){
			// 如果地址后没有#XXX就默认渲染首页
			if(location.hash == '' || location.hash == '#'){
				pageFun('index');
				return false;
			}
			pageFun(location.hash.slice(1));
		}
		// 监听地址栏地址发生变化
        window.onhashchange = function () {
			pageFun(location.hash.slice(1));
        };
		// 函数区域----------------------------------------------------------------------
		// 动态嵌入页面
		function pageFun(page){
			document.getElementById('LAY_APP').innerHTML = '<iframe src="' + './page/'+page+'/'+page+'.html' + '" height="100%" width="100%" frameborder="0"></iframe>';
		}
		
    </script>

原理就是获取浏览器当前地址,以#符号后匹配页面文件嵌入。

完整实例:

原生JS.zip

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/1240.html