Wie kann ich ohne einen Sprung um das Dokument aktualisieren window.location.hash?

StackOverflow https://stackoverflow.com/questions/3870057

Frage

Ich habe auf meiner Website eine Schiebewand aufgebaut.

Wenn es fertig belebende, habe ich den Hash wie so 

function() {
   window.location.hash = id;
}

(dies ist ein Rückruf und die id früher zugewiesen).

Das funktioniert gut, der Benutzer die Platte zu einem Lesezeichen versehen, und auch für die nicht JavaScript-Version zu arbeiten.

Allerdings, wenn ich den Hash aktualisieren, springt der Browser auf die Lage. Ich denke, das ist das erwartete Verhalten.

Meine Frage ist: Wie kann ich das verhindern? D. h Wie kann ich den Hash-Fenster ändern, aber nicht , um den Browser blättern zu dem Element, wenn der Hash existiert? Irgendeine Art von event.preventDefault() Art der Sache?

Ich bin mit jQuery 1.4 und die scrollTo Plugin .

Vielen Dank!

Update

Hier ist der Code, der die Platte ändert. 

$('#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;

            }
    });
});
War es hilfreich?

Lösung

Es gibt eine Abhilfe, indem Sie die Geschichte API auf modernen Browsern mit Rückfall auf alten: 

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

geht Credits zum Lea Verou

Andere Tipps

Das Problem ist, dass Sie die Einstellung des window.location.hash , um ein ID-Attributs des Elements. Es ist das erwartete Verhalten für den Browser auf dieses Element zu springen, und zwar unabhängig davon, ob Sie „prevent ()“ oder nicht.

Eine Möglichkeit, dies zu umgehen ist, den Hash mit einem beliebigen Wert Präfix wie folgt: 

window.location.hash = 'panel-' + id.replace('#', '');

Dann alles, was Sie tun müssen, ist für die vorangestellte Hash beim Laden der Seite zu überprüfen. Als zusätzlichen Bonus können Sie auch blättern, um es zu glätten, da Sie jetzt die Kontrolle über den Hash-Wert sind ... 

$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

Wenn Sie diese Arbeit zu jeder Zeit brauchen (und nicht nur auf der Startseite Last), können Sie eine Funktion zum Monitor Änderungen an den Hash-Wert und springt auf das richtige Element on-the-fly verwenden: 

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);

billig und schlecht Lösung .. Verwenden Sie das hässliche #! Stil.

es ein: 

window.location.hash = '#!' + id;

Um es zu lesen: 

id = window.location.hash.replace(/^#!/, '');

Da es nicht überein und Anker oder die ID auf der Seite, es wird nicht springen.

Warum nicht Sie die aktuelle Bildlaufposition zu bekommen, setzen Sie es in einer Variablen dann den Hash zuweisen und setzen Sie die Seite blättern zurück, wo es war: 

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

Das sollte funktionieren

Ich habe eine Kombination von Attila Fulop (Lea Verou) Lösung für moderne Browser und Gavin Brock Lösung für alte Browser wie folgt: 

if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, '#' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = '#!' + id;
}

Wie beobachtet von Gavin Brock, die ID zurück zu erfassen finden Sie die Zeichenfolge behandeln müssen (was in diesem Fall haben kann oder nicht „!“) Wie folgt: 

id = window.location.hash.replace(/^#!?/, '');

Davor habe ich versucht, eine Lösung ähnlich der von user706270 vorgeschlagen, aber es hat nicht funktioniert gut mit Internet Explorer: als Javascript-Engine nicht sehr schnell ist, können Sie die Scroll-Zunahme und Abnahme feststellen, die eine böse produziert visueller Effekt.

Diese Lösung für mich gearbeitet.

Das Problem mit location.hash Einstellung ist, dass die Seite auf diese ID springen, wenn es auf der Seite gefunden wird.

Das Problem mit window.history.pushState ist, dass es einen Eintrag in die Geschichte für jeden Reiter fügt der Benutzer klickt. Dann, wenn der Benutzer die back Schaltfläche klickt, gehen sie zur vorherige Registerkarte. (Dies kann oder kann nicht sein, was Sie wollen. Es war nicht das, was ich wollte).

Für mich replaceState war die bessere Option, dass es ersetzt nur die aktuelle Geschichte, so dass, wenn der Benutzer klickt auf die Schaltfläche back, gehen sie auf die vorherige Seite. 

$('#tab-selector').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});

Sehen Sie sich die History API-Dokumentation auf MDN .

Ich bin mir nicht sicher, ob Sie das ursprüngliche Element ändern können, sondern wie etwa Schalter aus der Verwendung der ID attr auf etwas anderes wie Daten-ID? Dann lesen Sie einfach den Wert der Daten-ID für Ihren Hash-Wert und es wird nicht springen.

Diese Lösung funktioniert für mich 

// 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');

Und meine volle js Code 

$('#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');

Wenn Laravel Framework, ich hatte einige Probleme mit der Verwendung einer Routen-> zurück () Funktion, da es meinen Hash gelöscht. Um meine Hash zu halten, habe ich eine einfache Funktion: 

$(function() {   
    if (localStorage.getItem("hash")    ){
     location.hash = localStorage.getItem("hash");
    }
});

und ich stellte es in meiner anderen JS-Funktion wie folgt aus: 

localStorage.setItem("hash", myvalue);

Sie können Ihre lokalen Speicher Werte wie du wie nennen; Mine namens hash.

Wenn daher die Hash auf S. 1 gesetzt ist und navigieren Sie zu SEITE2; der Hash wird auf Seite 1 neu erstellt werden, wenn Sie zurück auf SEITE2 klicken.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top