javascript - Die seitliche Navigationsleiste der DingTalk-Webversion wird nicht aktualisiert, sondern nur der Inhalt. Was ist die spezifische Technologie?-PHP-Tutorial-php.cn

javascript - Die seitliche Navigationsleiste der DingTalk-Webversion wird nicht aktualisiert, sondern nur der Inhalt. Was ist die spezifische Technologie?

WBOY

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

Original

1899 Leute haben es durchsucht

Die Navigationsleiste des DingTalk-Webversionsverwaltungsterminals wird nicht aktualisiert, sondern nur der Inhalt. Was ist die spezifische Technologie?

javascript - Die seitliche Navigationsleiste der DingTalk-Webversion wird nicht aktualisiert, sondern nur der Inhalt. Was ist die spezifische Technologie?

Die Adresse wird ebenfalls entsprechend aktualisiert. Bitte teilen Sie mir die spezifischen technischen Schlüsselwörter mit

Um es einfach auszudrücken: Kann ich VueJS verwenden, um diesen Effekt zu erzielen?

Antwortinhalt:

Die Navigationsleiste des DingTalk-Webversionsverwaltungsterminals wird nicht aktualisiert, sondern nur der Inhalt. Was ist die spezifische Technologie?

javascript - Die seitliche Navigationsleiste der DingTalk-Webversion wird nicht aktualisiert, sondern nur der Inhalt. Was ist die spezifische Technologie?

Die Adresse wird ebenfalls entsprechend aktualisiert. Bitte teilen Sie mir die spezifischen technischen Schlüsselwörter mit

Um es einfach auszudrücken: Kann ich VueJS verwenden, um diesen Effekt zu erzielen?

HTML5 pushState Ajax.

Ajax implementiert eine teilweise Aktualisierung, pushState implementiert das Ändern der Adressleiste, einschließlich der Browser-Zurück-Schaltfläche, um die Rückkehr zu implementieren.

Sie können einen Blick auf Pjax werfen, das auf Basis dieser Technologie implementiert wurde.

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

Wurde die Adressleiste aktualisiert?

Eine Single-Page-Anwendung kann diese Funktion problemlos implementieren.

js wechselt einzelne Seiteninhalte ohne Seitensprung

Ajax? ?

Es fühlt sich an, als wäre es in diesem Artikel erwähnt worden

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

Gehen Sie zu DingTalk und sehen Sie sich die Ergebnisse wie folgt an:

1. Die Navigationsleiste wird nicht aktualisiert. Nach dem Aktualisieren finden Sie Folgendes es wird tatsächlich aktualisiert und die Anfrage kommt zurück. Der HTML-Code gibt die gesamte Seite zurück und nicht einen Teil davon.

2. Der mittlere Teil wird asynchron geladen. Sie können in den Entwicklungstools auf „JavaScript deaktivieren“ gehen und feststellen, dass der mittlere Bereich leer ist. Hier wird hauptsächlich der Werbeschieberegler geladen.
3. Die Unterseite scheint nicht aktualisiert zu sein, da fast alle Bilder zwischengespeichert sind. Sie können das Netzwerk überprüfen und der Status ist 304 statt 200.

Vue-Router

Ob es sich um eine Single-Page-Anwendung oder andere Bibliotheken wie Vue handelt, das Prinzip ist letztendlich AJAX oder PJAX, das asynchron Serverdaten über den JS-Hintergrund anfordert, normalerweise JSON- oder XML-Daten, und dann die DOM-Anzeige über js manipuliert Daten- und Single-Page-Websites können auch die History-API verwenden, um die URL zu aktualisieren.

AJAX-Implementierungsreferenz: AJAX. Es gibt keinen Raum zum Lernen, ich hoffe, es zu übernehmen.

Das Unternehmensprojekt ähnelt diesem, und ich gebe dem Poster eine Idee: Erstens wird beim Umschalten des Inhalts der Navigationsleiste die Seite nicht aktualisiert, sondern nur der Inhalt auf der rechten Seite ---- der Inhalt des Iframes und der Iframe-Inhalt hängt von seiner URL ab. Mit anderen Worten: Wenn sich der Inhalt der linken Navigationsleiste ändert, ändert sich auch der URL-Wert des rechten Iframe-Tags. js überwacht Änderungen in der linken Navigationsleiste und übergibt den Wert dann dynamisch an den rechten Iframe. Ich hoffe, es hilft dem Originalposter

Dies ist die relevante Methode:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Arbeitsbereich festlegen
/Funktion 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>

Nach dem Login kopieren

Dies ist der relevante HTML-Dom: