原生JS配置后台系统的导航路由
后台系统一般情况下不考虑SEO优化服务，仅作为数据填报及展示等，所以目前一般都使用前后端分离模式进行开发，像Vue、react等框架都可实现，但数据获取的过程不利于搜索引擎抓取数据，所以目前...
后台系统一般情况下不考虑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>
原理就是获取浏览器当前地址，以#符号后匹配页面文件嵌入。
完整实例:
- 发表于 2021-10-13 17:23
- 阅读 ( 520 )
- 分类：web前端开发
