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

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

地址也会随着更新, 麻烦说出具体的技术关键词 谢谢

简单点说 我可以使用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。学无领域,希望采纳。

应该是ajax局部刷新吧

蛤!最近我也是在用vue搞一个单页应用,建议你使用vue-route(←感觉好像拼错了,路由的单词。。。)就可以做到这种上面的url变化而局部刷新。
实现这种局部刷新的,第一个想到的应该是ajax,当然对应起url,那就是大名鼎鼎的pjax了,也就是html5里面的pushState + ajax,这方面我建议你可以看下张鑫旭的demo
其次优雅降级,用iframe,专门对付ie老古董的,但是对应做到路由管理的,还是比较困难
前端路由可是web的未来呢。路由管理什么的,交给前端做就行了,后台负责接口开发和数据库管理就好了。

使用 pjax就可以实现了 我这个站就是使用它实现的。http://www.zanyy.com

公司项目与之类似,给楼主提供一个思路:首先,导航栏内容的切换,页面并没有刷新,变的只是右边的内容—-iframe的内容,而iframed 内容是靠它的url得到的,也就是说,当左边导航栏的内容变化了,右边iframe标签的url值也要做出变化。js监听左边导航栏的变化,然后动态传值给右边iframe中。希望对楼主有帮助
这是相关的方法:
function loadSubmenu{

var m = menu[currTab];
/* 子菜单标题 */
$#submenuTitle.textm.subtext ? m.subtext : m.text;
/* 删除所有现有子菜单 */
$#submenu.finddd.remove;
/* 将子菜单逐项添加到菜单中 */
$.eachm.children, functionk, 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.childrena.clickfunction{ openItemthis.id.substr5; }; $#submenu.appenditem;
};

}
function openItemitemIndex, tab{

iftypeofitemIndex == undefined
{ var itemIndex = menu[currTab][default];
}
var id = #item_ + itemIndex;
iftab{ var parent = tab;
}else{ var parent = $id.attrparent;
}
/* 若不在当前选项卡内 */
ifparent != currTab{ /* 切换到指定选项卡 */ switchTabparent;
}
/* 高亮当前项 */
$#submenu.finda.eachfunction{ $this.removeClassselected;
};
$id.addClassselected; /* 更新iframe的内容 */
$#workspace.show;
$#workspace.attrsrc, $id.attrurl; /* 将该操作加入到历史访问当中 */
addHistoryItemcurrTab, itemIndex;

}
/ 设置工作区 /
function setWorkspace{

var wWidth = $window.width;
var wHeight = $window.height;
$#workspace.widthwWidth - $#left.width - parseInt$#left.cssmargin-right;
$#workspace.heightwHeight - $#head.height;

}

这是相关的 HTML dom:

<div id=”left”>

 <div id="leftMenus"> <dl id="submenu"> <dt><a class="ico1" id="submenuTitle" href="javascript:;"></a></dt> </dl> </div>
</div>
<div id="right"> <iframe frameborder="0" style="display:none;" width="100%" id="workspace"></iframe>
</div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注