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

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

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


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

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


谷歌演示图:

attachments-2021-10-i0WpsvCf6166a4342cccc.png

ie演示图:

attachments-2021-10-0jKRbOaL6166a480652ba.png

原生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

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Safiylumn 0 文章