钉钉网页版管理端导航栏不刷新只刷新内容的技术具体是什么
地址也会随着更新,麻烦说出具体的技术关键词谢谢
简单点说我可以使用vuejs实现这个效果吗单页应用
HTML5pushState+Ajax。
Ajax实现局部刷新,pushState实现更改地址栏,包括浏览器返回按钮实现返回。
可以看看基于此技术实现的Pjax。
地址栏有更新么
单页应用啊,就可以方便的实现这点功能啊。
js切换单页内容,不做页面跳转
Ajax??
感觉像是这个文章提及的
去钉钉看了下,结果如下:
1.导航栏并不是没有刷新,你可以修改一下dom(修改导航里的li),刷新后发现其实是被刷新的,而且请求回来的html返回的是整个页面而不是局部。
2.中间部分是异步加载的,这点你可以在DevTools里去DisableJavaScript,发现中间区域是空白的,这里它主要加载的是广告的slider。
3.底部似乎看起来是不被刷新的,因为图片几乎全是cached,这点你可以查看Network,状态是304而不是200.
vue-router
不管是单页应用还是其他Vue之类的库也好,其原理最终是AJAX或者是PJAX,通过JS后台异步请求服务器数据,通常是json或者是xml的数据,然后通过js操纵DOM显示数据,单页网站还可以用
AJAX实现参考:
应该是ajax局部刷新吧
蛤!最近我也是在用vue搞一个单页应用,建议你使用vue-route(←感觉好像拼错了,路由的单词。。。)就可以做到这种上面的url变化而局部刷新。
实现这种局部刷新的,第一个想到的应该是ajax,当然对应起url,那就是大名鼎鼎的pjax了,也就是html5里面的pushState+ajax,这方面我建议你可以看下张鑫旭的
其次优雅降级,用iframe,专门对付ie老古董的,但是对应做到路由管理的,还是比较困难
前端路由可是web的未来呢。路由管理什么的,交给前端做就行了,后台负责接口开发和数据库管理就好了。
使用pjax就可以实现了我这个站就是使用它实现的。
公司项目与之类似,给楼主提供一个思路:首先,导航栏内容的切换,页面并没有刷新,变的只是右边的内容----iframe的内容,而iframed内容是靠它的url得到的,也就是说,当左边导航栏的内容变化了,右边iframe标签的url值也要做出变化。js监听左边导航栏的变化,然后动态传值给右边iframe中。希望对楼主有帮助
这是相关的方法:
functionloadSubmenu(){
varm=menu[currTab];/*子菜单标题*/$('#submenuTitle').text(m.subtext?m.subtext:m.text);/*删除所有现有子菜单*/$('#submenu').find('dd').remove();/*将子菜单逐项添加到菜单中*/$.each(m.children,function(k,v){varp=v.parent?v.parent:currTab;varitem=$('<dd><ahref="javascript:;"url="'+v.url+'"parent="'+p+'"id="item_'+k+'">'+v.text+'</a></dd>');item.children('a').click(function(){openItem(this.id.substr(5));});$('#submenu').append(item);});
}
functionopenItem(itemIndex,tab){
if(typeof(itemIndex)=='undefined'){varitemIndex=menu[currTab]['default'];}varid='#item_'+itemIndex;if(tab){varparent=tab;}else{varparent=$(id).attr('parent');}/*若不在当前选项卡内*/if(parent!=currTab){/*切换到指定选项卡*/switchTab(parent);}/*高亮当前项*/$('#submenu').find('a').each(function(){$(this).removeClass('selected');});$(id).addClass('selected');/*更新iframe的内容*/$('#workspace').show();$('#workspace').attr('src',$(id).attr('url'));/*将该操作加入到历史访问当中*/addHistoryItem(currTab,itemIndex);
}
/设置工作区/
functionsetWorkspace(){
varwWidth=$(window).width();varwHeight=$(window).height();$('#workspace').width(wWidth-$('#left').width()-parseInt($('#left').css('margin-right')));$('#workspace').height(wHeight-$('#head').height());
}
这是相关的HTMLdom:
<divid="left">
<divid="leftMenus"><dlid="submenu"><dt><aclass="ico1"id="submenuTitle"href="javascript:;"></a></dt></dl></div></div><divid="right"><iframeframeborder="0"style="display:none;"width="100%"id="workspace"></iframe></div>