钉钉网页版管理端 导航栏不刷新 只刷新内容的技术具体是什么

地址也会随着更新, 麻烦说出具体的技术关键词 谢谢
简单点说 我可以使用vuejs实现这个效果吗 单页应用
回复内容:
钉钉网页版管理端 导航栏不刷新 只刷新内容的技术具体是什么

地址也会随着更新, 麻烦说出具体的技术关键词 谢谢
简单点说 我可以使用vuejs实现这个效果吗 单页应用
HTML5 pushState + Ajax。
Ajax实现局部刷新,pushState实现更改地址栏,包括浏览器返回按钮实现返回。
可以看看基于此技术实现的Pjax。
https://github.com/defunkt/jq...
地址栏有更新么
单页应用啊,就可以方便的实现这点功能啊。
js切换单页内容,不做页面跳转
Ajax??
感觉像是这个文章提及的
http://www.cnblogs.com/08shiy...
去钉钉看了下,结果如下:
1.导航栏并不是没有刷新,你可以修改一下dom(修改导航里的li),刷新后发现其实是被刷新的,而且请求回来的html返回的是整个页面而不是局部。
2.中间部分是异步加载的,这点你可以在Dev Tools里去Disable JavaScript,发现中间区域是空白的,这里它主要加载的是广告的slider。
3.底部似乎看起来是不被刷新的,因为图片几乎全是cached,这点你可以查看Network,状态是304而不是200.
vue-router
不管是单页应用还是其他Vue之类的库也好,其原理最终是AJAX或者是PJAX,通过JS后台异步请求服务器数据,通常是json或者是xml的数据,然后通过js操纵DOM显示数据,单页网站还可以用History API来实现URL的刷新,
AJAX实现参考:AJAX。学无领域,希望采纳。
公司项目与之类似,给楼主提供一个思路:首先,导航栏内容的切换,页面并没有刷新,变的只是右边的内容----iframe的内容,而iframed 内容是靠它的url得到的,也就是说,当左边导航栏的内容变化了,右边iframe标签的url值也要做出变化。js监听左边导航栏的变化,然后动态传值给右边iframe中。希望对楼主有帮助
这是相关的方法:
function loadSubmenu(){
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <code> var m = menu[currTab];
$( '#submenuTitle' ).text(m.subtext ? m.subtext : m.text);
$( '#submenu' ).find( 'dd' ).remove();
$.each(m.children, function (k, v){
var p = v.parent ? v.parent : currTab;
var item = $( '<dd><a href="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);
});</code>
|
Salin selepas log masuk
}
function openItem(itemIndex, tab){
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <code> if (typeof(itemIndex) == 'undefined' )
{
var itemIndex = menu[currTab][ 'default' ];
}
var id = '#item_' + itemIndex;
if (tab){
var parent = tab;
} else {
var parent = $(id).attr( 'parent' );
}
if (parent != currTab){
switchTab(parent);
}
$( '#submenu' ).find( 'a' ).each( function (){
$(this).removeClass( 'selected' );
});
$(id).addClass( 'selected' );
$( '#workspace' ).show();
$( '#workspace' ).attr( 'src' , $(id).attr( 'url' ));
addHistoryItem(currTab, itemIndex);</code>
|
Salin selepas log masuk
}
/ 设置工作区 /
function setWorkspace(){
1 2 3 4 | <code> var wWidth = $(window).width();
var wHeight = $(window).height();
$( '#workspace' ).width(wWidth - $( '#left' ).width() - parseInt($( '#left' ).css( 'margin-right' )));
$( '#workspace' ).height(wHeight - $( '#head' ).height());</code>
|
Salin selepas log masuk
}
这是相关的 HTML dom:
1 2 3 4 5 6 | <code> <div id= "leftMenus" >
<dl id= "submenu" >
<dt><a class = "ico1" id= "submenuTitle" href= "javascript:;" ></a></dt>
</dl>
</div>
</code>
|
Salin selepas log masuk