javascript - 딩톡 웹버전 관리측 네비게이션 바가 새로고침이 되지 않고 내용만 새로고침되는 구체적인 기술은 무엇인가요?
- WBOY원래의
- 2016-09-19 09:16:251906검색
딩톡 웹버전 관리단말기 내비게이션바는 새로고침이 안되고, 내용만 새로고침되는 구체적인 기술이 뭔가요
주소도 업데이트 예정입니다. 구체적인 기술 키워드를 알려주세요
간단히 말하면 vuejs를 사용하여 단일 페이지 애플리케이션을 구현할 수 있나요?
답글 내용:
딩톡 웹버전 관리단말기 내비게이션바는 새로고침이 안되고, 내용만 새로고침되는 구체적인 기술이 뭔가요
주소도 업데이트 예정입니다. 구체적인 기술 키워드를 알려주세요
간단히 말하면 vuejs를 사용하여 단일 페이지 애플리케이션을 구현할 수 있나요?
HTML5 pushState + Ajax.
Ajax는 부분 새로 고침을 구현하고, pushState는 주소 표시줄 변경을 구현하며, 반환을 구현하는 브라우저 반환 버튼도 포함합니다.
이 기술을 기반으로 구현된 Pjax를 살펴보실 수 있습니다.
https://github.com/defunkt/jq...
주소창이 업데이트됐나요?
단일 페이지 애플리케이션으로 이 기능을 쉽게 구현할 수 있습니다.
js는 페이지 이동 없이 단일 페이지 콘텐츠를 전환합니다
아약스? ?
이 글에서도 언급된 것 같네요
http://www.cnblogs.com/08shiy...
DingTalk에 가서 확인해 보면 다음과 같습니다.
1. 탐색 표시줄이 새로 고쳐지지 않습니다. (탐색에서 li 수정) 실제로 새로 고쳐지고 요청이 페이지의 일부가 아닌 전체 페이지를 반환합니다.
2. 중간 부분은 개발자 도구에서 JavaScript 비활성화로 이동하여 중간 영역이 비어 있음을 확인할 수 있습니다.
3. 거의 모든 이미지가 캐시되어 있어서 하단이 새로 고쳐지지 않는 것 같습니다. 네트워크 상태가 200이 아닌 304로 확인됩니다.
뷰-라우터
단일 페이지 애플리케이션이든 Vue와 같은 다른 라이브러리이든 원칙은 궁극적으로 AJAX 또는 PJAX입니다. 이는 JS 배경을 통해 서버 데이터(일반적으로 json 또는 xml 데이터)를 비동기적으로 요청한 다음 js를 통해 DOM 디스플레이를 조작합니다. 데이터, 단일 페이지 웹사이트는 History API를 사용하여 URL을 새로 고칠 수도 있습니다.
AJAX 구현 참조: AJAX. 학습할 여지가 없습니다. 채택하고 싶습니다.
회사 프로젝트도 이와 비슷한데, 한 가지 아이디어를 드리고자 합니다. 먼저 네비게이션 바의 콘텐츠가 전환되면 페이지가 새로고침되지 않고 오른쪽 콘텐츠만 새로고침됩니다. iframe이 변경되고 iframe 콘텐츠는 해당 URL에 따라 달라집니다. 즉, 왼쪽 탐색 모음의 콘텐츠가 변경되면 오른쪽 iframe 태그의 URL 값도 변경됩니다. Node.js는 왼쪽 탐색 모음의 변경 사항을 모니터링한 다음 해당 값을 오른쪽 iframe에 동적으로 전달합니다. 원본 포스터에 도움이 되기를 바랍니다
관련 방법은 다음과 같습니다:
함수 loadSubmenu(){
<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>
}
함수 openItem(itemIndex, 탭){
<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');
/* 更新iframe的内容 */
$('#workspace').show();
$('#workspace').attr('src', $(id).attr('url'));
/* 将该操作加入到历史访问当中 */
addHistoryItem(currTab, itemIndex);</code>
}
/ 작업공간 설정 /
함수 setWorkspace(){
<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>
}
관련 HTML DOM은 다음과 같습니다.
<code> <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></code>