Stellen jQuery verhindert auf android

Question

zurück habe ich eine einfache Popup-Kontaktformular Skript geschrieben:

$(document).ready(function(){ 
    var popupButton = $("#contact-popup-button"); 
    var popupBox = $("#pop-up-contact"); 
    var popupBg = $("#pop-up-close-background"); 

    popupButton.on("click", function(){ 
     popupBox.addClass("slide-out"); 
     popupBg.fadeIn(200); 
    }); 

    popupBg.on("click", function(){ 
     popupBox.removeClass("slide-out"); 
     popupBg.fadeOut(100); 
    }); 

Grundsätzlich, wenn eine Schaltfläche geklickt wird, ein div erscheint und der Raum dahinter wird neblig. Wenn Sie den Raum um das erscheinende Div drücken, wird es verschwinden. Jetzt für mobile Geräte, würde ich auch gerne eine Option, um die div verschwinden durch Klicken auf den Zurück-Button. Leider kann ich es in der Praxis nicht umsetzen. Ich habe diese Antworten versucht:

1. handling back button in android from jquery
2. Take control of hardware back button jquery mobile

Aber beide scheinen in dieser Aufgabe zu scheitern, und die anderen verwenden Plugins, die Ich mag würde zu vermeiden. Getestet auf LG G2 Mini und Sony Xperia Z1

Answer 1

Ein Ansatz wäre, die HTML5 History API zu verwenden.

Wenn das Popup öffnen Sie einen Zustand der Geschichte Stapel bevor das Popup öffnen drücken können: automatisch history.pushState({popupOpen: false}, "My title", "index.html"); Diese Methode aktualisiert den Seitentitel und den letzten Teil der URL (die zur Zeit in den meisten Browser-Implementierungen ignoriert wird), Das wird in der Browserleiste angezeigt. In den meisten Fällen können Sie hier Ihren Dateinamen eingeben. Das erste Argument ist ein Objekt, das die Daten enthält, auf die Sie später beim Aufrufen eines Status zugreifen können.

Sobald Sie einen Status in den Verlaufsstapel geschoben haben, kehrt der Browser beim Drücken der Zurück-Taste nicht wie üblich zur letzten Seite zurück, sondern der letzte Status wird auf dem Stapel angezeigt. Dies gilt jedoch für alle Browser. Wenn Sie nur die Funktionalität für mobile Browser wünschen, müssen Sie vor dem Aufruf von history.pushState eine Browserprüfung durchführen.

Um das Back-Event korrekt zu behandeln, müssen Sie das popstate-Event abonnieren.

window.addEventListener("popstate", function(event) { 
    var data = event.state; 
    if(data.popupOpen === false) { 
    popupBg.trigger('click'); 
    } 
}); 

Sie registrieren einen Ereignis-Listener, die, sobald der Benutzer feuert navigiert zurück: Dies kann mit dem folgenden Code durchgeführt werden. In der Variablen event.state können die Daten, die Sie beim Drücken des Status übergeben haben, erneut aufgerufen werden.

Viel Glück!