Heutzutage verfügt h5 über viele neue Funktionen, neue Tags, neue Spezifikationen usw. und diese werden ständig verbessert. 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 (diese ist derzeit nicht besonders neu), mit der Sie die Rückgabetaste jeder App, einschließlich der physischen Rückgabetaste auf Android-Geräten, problemlos überwachen können, um weitere Anforderungen zu erfüllen Bedürfnisse in der Projektentwicklung.
2. UrsacheVor etwa einem halben Jahr erhielt ich eine Anfrage von PM, reines h5 zu verwenden, um die Wiedergabe, Pause und Wiederaufnahme von Multi-Audio zu realisieren. Die Seite wird in der Driving Test Guide App platziert und es findet keine Interaktion mit dem Kunden statt. Daher muss nicht auf js verwiesen werden, die sich auf den Client beziehen. 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 konzentriere ich mich darauf, wie ich die mit jeder App gelieferte Eingabetaste sowie die physische Eingabetaste auf Android-Geräten überwache.Warum sollte ich also überwachen? Ich muss es 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 dann ist die Antwort nichts weiter als diese
pushHistory(); window.addEventListener(popstate, function(e) { Alert(Ich habe mir das Zurück-Button-Ereignis des Browsers angehört);//Implementieren Sie Ihre eigenen Funktionen entsprechend Ihren eigenen Anforderungen}, 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. Erst auf Anraten eines guten Freundes habe ich diesen Code kopiert.
var verstecktProperty = 'versteckt' im Dokument? 'versteckt': 'webkitHidden' im Dokument? 'webkitHidden': 'mozHidden' im Dokument? );var onVisibilityChange = function(){ if (!document[hiddenProperty]) { console.log('Seite inaktiv'); }else{ console.log('Seite aktiviert') }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);Alle Probleme sind 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/zh-CN/docs/Web/API/Document/hidden
Es ist nicht so, dass Sie den integrierten Zurück-Button in der App über JS oder sogar den physischen Zurück-Button auf Android wirklich überwachen können, aber Sie können Ihre Bedürfnisse schnell erkennen, indem Sie Ihre Denkweise ändern. Ich hoffe, diese Funktion kann Ihnen helfen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.