javascript - DingTalk web version management side navigation bar does not refresh and only refreshes the content. What is the specific technology?-PHP Tutorial-php.cn

javascript - DingTalk web version management side navigation bar does not refresh and only refreshes the content. What is the specific technology?

WBOY

Release： 2016-09-19 09:16:25

Original

1878 people have browsed it

What is the specific technology of DingTalk web version management terminal that the navigation bar does not refresh and only refreshes the content?

javascript - DingTalk web version management side navigation bar does not refresh and only refreshes the content. What is the specific technology?

The address will also be updated accordingly. Please tell me the specific technical keywords. Thank you

To put it simply, can I use vuejs to achieve this effect? Single page application

Reply content:

What is the specific technology of DingTalk web version management terminal that the navigation bar does not refresh and only refreshes the content?

javascript - DingTalk web version management side navigation bar does not refresh and only refreshes the content. What is the specific technology? The address will also be updated accordingly. Please tell me the specific technical keywords. Thank you

To put it simply, can I use vuejs to achieve this effect as a single page application

HTML5 pushState + Ajax.

Ajax implements partial refresh, pushState implements changing the address bar, including the browser's back button to implement return.

You can take a look at Pjax implemented based on this technology.

https://github.com/defunkt/jq...

Has the address bar been updated?

A single-page application can easily implement this function.

js switches single page content without page jump

Ajax? ?

It feels like it was mentioned in this article

http://www.cnblogs.com/08shiy...

Go to DingTalk and take a look, and the results are as follows:

1. The navigation bar is not refreshed. You can modify the dom (modify the li in the navigation). After refreshing, you find that it is actually refreshed, and the requested html is returned. It's the entire page, not just part of it.

2. The middle part is loaded asynchronously. You can go to Disable JavaScript in Dev Tools and find that the middle area is blank. Here it mainly loads the advertising slider.
3. The bottom seems not to be refreshed, because almost all the images are cached. You can check the Network and the status is 304 instead of 200.

vue-router

Whether it is a single-page application or other libraries such as Vue, the principle is ultimately AJAX or PJAX, which asynchronously requests server data through the JS background, usually json or xml data, and then manipulates the DOM to display the data through js. Single-page websites can also use the History API to refresh the URL.

AJAX implementation reference: AJAX. There is no scope for learning, I hope to adopt it.

The company's project is similar to this. Here is an idea for the poster: First of all, when the content of the navigation bar is switched, the page is not refreshed. Only the content on the right - the content of the iframe - is changed, and the iframed content is obtained by its URL. , that is to say, when the content of the left navigation bar changes, the url value of the right iframe tag will also change. js monitors changes in the left navigation bar and then dynamically passes the value to the right iframe. Hope it helps the original poster

This is the relevant method:

function 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>

Copy after login

}function openItem(itemIndex, tab){

<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>

Copy after login

Set workspace
/function 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>

Copy after login

}

This is the relevant 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>

Copy after login