Cum pot actualiza fereastra.locație.hash fără sărituri documentul?
Am o alunecare panoul de configurat pe site-ul meu.
Când a terminat de animare, am setat hash ca asa
function() {
window.location.hash = id;
}(acesta este un apel invers, și " id " este atribuit mai devreme).
Aceasta funcționează bine, pentru a permite utilizatorului pentru a marca panoul, și, de asemenea, pentru non versiunea JavaScript pentru a lucra.
Cu toate acestea, atunci când am actualiza hash, browser-ul sare la locație. Cred că acest lucru este de așteptat comportament.
Intrebarea mea este: cum pot preveni acest lucru? I. e. cum pot schimba fereastra's hash, dar *nu *** au browser-ul defilați la elementul dacă hash există? Un fel de eveniment.preventDefault()` un astfel de lucru?
Am'm folosind jQuery 1.4 și scrollTo plugin.
Multe mulțumiri!
Update
Aici este codul care schimbă panou.
$('#something a').click(function(event) {
event.preventDefault();
var link = $(this);
var id = link[0].hash;
$('#slider').scrollTo(id, 800, {
onAfter: function() {
link.parents('li').siblings().removeClass('active');
link.parent().addClass('active');
window.location.hash = id;
}
});
});
Există o soluție, cu ajutorul istorie API pe browserele moderne cu rezervă pe cele vechi:
if(history.pushState) {
history.pushState(null, null, '#myhash');
}
else {
location.hash = '#myhash';
}De Credit merge la Lea Verou
Problema este ca sunt setarea fereastră.locație.hash pentru un element's atributul ID. Acesta este comportamentul așteptat pentru browser-ul pentru a sări la acel element, indiferent dacă "preventDefault()" sau nu.
O modalitate de a obține în jurul valorii de acest lucru este de a prefix hash cu o valoare arbitrară astfel:
window.location.hash = 'panel-' + id.replace('#', '');Apoi, tot ce trebuie să faceți este să verificați pentru prefixate hash pe pagina de încărcare. Ca un bonus, puteți chiar de parcurgere buna la ea, deoarece acum sunteți în controlul de valoarea hash...
$(function(){
var h = window.location.hash.replace('panel-', '');
if (h) {
$('#slider').scrollTo(h, 800);
}
});Dacă aveți nevoie de acest lucru pentru a lucra la toate ori (și nu doar pe pagina inițială de încărcare), puteți utiliza o funcție pentru a monitoriza schimbările în valoarea hash și sari pentru a corecta element de pe-the-fly:
var foundHash;
setInterval(function() {
var h = window.location.hash.replace('panel-', '');
if (h && h !== foundHash) {
$('#slider').scrollTo(h, 800);
foundHash = h;
}
}, 100);
Ieftine și urât soluție.. Utilizați urât #! stil.
Pentru a seta:
window.location.hash = '#!' + id;Pentru a citi:
id = window.location.hash.replace(/^#!/, '');De't de meci și de ancorare sau id-ul în pagină, nu o't sari.
De ce nu obține poziția curentă de parcurgere, pune-l într-o variabilă și apoi atribuiți hash și a pus pe pagina de parcurgere înapoi de unde a fost:
var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;acest lucru ar trebui să funcționeze
Am folosit o combinație de Fulop Attila (Lea Verou) soluție pentru browserele moderne și Gavin Brock soluție pentru browserele vechi, după cum urmează:
if (history.pushState) {
// IE10, Firefox, Chrome, etc.
window.history.pushState(null, null, '#' + id);
} else {
// IE9, IE8, etc
window.location.hash = '#!' + id;
}Cum s-a observat de Gavin Brock, pentru a capta id-ul înapoi, va trebui să trateze string (care în acest caz poate avea sau nu "!"), după cum urmează:
id = window.location.hash.replace(/^#!?/, '');Înainte de asta, am încercat o soluție similară cu cea propusă de user706270, dar nu a mers bine cu Internet Explorer: ca motor Javascript nu este foarte rapid, se poate observa scroll crește și descrește, care produce un urât efect vizual.
Această soluție a funcționat pentru mine.
Problema cu setarea de locație.hash este că pagina va sari la id-ul daca-l's găsite pe pagina.
Problema cu fereastra.istorie.pushState` este faptul că adaugă o intrare la istoria pentru fiecare tab utilizatorul face clic. Atunci când utilizatorul face clic pe butonul "înapoi", - au du-te la fila anterioară. (acest lucru poate sau nu poate fi ceea ce vrei. acesta nu a fost ceea ce am vrut).
Pentru mine, replaceState a fost cea mai bună opțiune, în care se înlocuiește numai istoria actuală, astfel încât atunci când utilizatorul face clic pe butonul "înapoi", - au du-te la pagina anterioară.
$('#tab-selector').tabs({
activate: function(e, ui) {
window.history.replaceState(null, null, ui.newPanel.selector);
}
});Check out Istorie API docs pe MDN.
Această soluție a lucrat pentru mine
// store the currently selected tab in the hash value
if(history.pushState) {
window.history.pushState(null, null, '#' + id);
}
else {
window.location.hash = id;
}
// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');Și-mi plin cod js este
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
var id = $(e.target).attr("href").substr(1);
if(history.pushState) {
window.history.pushState(null, null, '#' + id);
}
else {
window.location.hash = id;
}
// window.location.hash = '#!' + id;
});
// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
// console.log(hash);
$('#myTab a[href="' + hash + '"]').tab('show');
Când folosind laravel cadru, am avut unele probleme cu ajutorul unui traseu->înapoi() funcția de când mi-a șters hash. În scopul de a păstra meu hash, am creat o funcție de simplu:
$(function() {
if (localStorage.getItem("hash") ){
location.hash = localStorage.getItem("hash");
}
}); și am pus-o în alte JS funcție de genul asta:
localStorage.setItem("hash", myvalue);Puteti stocare locală valori în orice mod doriți; - al meu pe nume hash.
Prin urmare, dacă hash-ul este setat pe PAGINA1 și apoi navigați la PAGINA2; hash va fi recreat pe PAGINA1 atunci când faceți clic pe Înapoi pe PAGINA2.
