Die Navigationsleiste des DingTalk-Webversionsverwaltungsterminals 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:
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...
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.
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.
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>
<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>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>Dies ist der relevante HTML-Dom:
