Nutzung neuer h5-Funktionen: Überwachung der mit der App gelieferten Return-Taste

Dieser Artikel stellt Ihnen den Artikel über die Verwendung der neuen Funktionen von h5 zur einfachen Überwachung der Rückgabetaste jeder App vor. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

1. Vorwort

Heutzutage verfügt h5 über viele neue Funktionen, neue Tags, neue Spezifikationen usw. und auch die Unterstützung großer Browser-Anbieter ist recht stark. Als Front-End-Programmierer denke ich, dass wir immer noch aktiv aufpassen und es mutig üben müssen. Als Nächstes werde ich Ihnen eine sehr nützliche neue Funktion von h5 vorstellen (im Moment ist sie nicht besonders neu), mit der Sie die Eingabetaste jeder App, einschließlich der physischen Eingabetaste von Android-Telefonen, problemlos überwachen können, um weitere Anforderungen zu erfüllen Bedürfnisse in der Projektentwicklung.

2. Ursache

Vor etwa einem halben Jahr erhielt ich eine Anfrage von PM, Pure H5 zu verwenden, um die Wiedergabe, Pause und Wiederaufnahme von Multi-Audio zu realisieren Fahrprüfungsheft-App und Verbindung mit dem Kunden. Es gibt keine Interaktion, daher muss nicht auf kundenbezogene JS verwiesen werden. Es scheint, dass diese Anforderung recht einfach ist, obwohl ich noch nie zuvor eine ähnliche Anforderung gestellt habe. Egal was passiert, krempeln Sie einfach die Ärmel hoch und machen Sie es. Die Lernreise begann.

3. Hier werde ich mich darauf konzentrieren, wie ich die Zurück-Taste, die in jeder App enthalten ist, sowie die physische Zurück-Taste auf Android-Telefonen überwache.

Warum sollte ich es dann immer wieder betonen? Ob WeChat, QQ, App oder der Browser eines Apple-Telefons: Wenn es um Audio und Video geht, pausiert das System automatisch die aktuelle Wiedergabe, wenn zur vorherigen Seite zurückgekehrt wird. Dies ist jedoch nicht bei allen Android-Telefonen möglich. Daher müssen wir die Überwachung selbst anpassen. Viele Freunde denken vielleicht zuerst an Baidu und die Antwort, die ihnen einfällt, ist nichts weiter als dieses

pushHistory(); 
window.addEventListener("popstate", function(e) { 
    alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
}, false); 
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
}

Kommt es Ihnen bekannt vor? Die zentralen Anforderungen konnten jedoch nicht perfekt umgesetzt werden. Ich habe mir damals den Kopf darüber zerbrochen, welchen Nutzen dieser Code hatte. Bis ich diesen Code unter der Anleitung eines tollen Freundes

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (document[hiddenProperty]) {    
        console.log('页面非激活');
    }else{
        console.log('页面激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

kopiert habe, waren alle Probleme gelöst.
Mein persönliches Verständnis des Prinzips dieses Codes besteht darin, verwandte Vorgänge auszuführen, indem festgestellt wird, ob der Benutzer die aktuelle Seite durchsucht.
Dies ist der MDN-bezogene Link: https://developer.mozilla.org....

4. Mobiltelefonkompatibilität

Wie wir alle wissen, sind aktuelle Android-Systeme wie 4.0 und andere Low-Profile-Versionen, aber persönliche Low-Profile-Android Telefone können es nicht erkennen. Der Grund dafür ist, dass die Kernelversion von navigator.userAgent zu niedrig ist und viele Chrome-Versionen jetzt 64+ sind. Wenn Sie also auf dieses Problem stoßen, finden Sie einfach einen Weg, damit kompatibel zu sein.

Es ist nicht so, dass Sie die direkte Betätigung des Benutzers der integrierten Zurück-Taste in der App über JS oder sogar der physischen Zurück-Taste von Android wirklich überwachen können, sondern dass Sie Ihre Bedürfnisse schnell erkennen können, indem Sie Ihre ändern Denken. Ich hoffe, diese Funktion kann Ihnen helfen.

Verwandte Empfehlungen:

So verwenden Sie die Chrome-Konsole für die 3D-Modellbearbeitung (Code)

H5 WeChat Payment führt die js-Lösung von WeChat für SDK ein Paketfehler

Das obige ist der detaillierte Inhalt vonNutzung neuer h5-Funktionen: Überwachung der mit der App gelieferten Return-Taste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!