Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Beispiele für die Verwendung der HTML5-Benachrichtigungsfunktion (Desktop-Erinnerung)_HTML5-Tutorial-Fähigkeiten

Beispiele für die Verwendung der HTML5-Benachrichtigungsfunktion (Desktop-Erinnerung)_HTML5-Tutorial-Fähigkeiten

WBOY
Freigeben： 2016-05-16 15:48:13
Original
2255 Leute haben es durchsucht

1. Einführung in die HTML5-Benachrichtigung
HTML5-Benachrichtigung ist eine Desktop-Benachrichtigung. Derzeit arbeiten Browser noch im strikten Sandbox-Modus, der die Kommunikation zwischen Browser und Desktop isoliert. Die Benachrichtigung kann sich über Sandboxen erstrecken, sodass der Browser Benutzer auch dann über Nachrichten benachrichtigen kann, wenn diese minimiert sind.
2. Desktop-Erinnerungs-API

Kopieren Sie den Code
Der Code lautet wie folgt:
window.webkitNotifications

Die API verfügt über 3 Methoden:

Code kopieren
Der Code lautet wie folgt:
requestPermission Desktop-Benachrichtigung anfordern
checkPermission Desktop-Benachrichtigungsberechtigung prüfen (PERMISSION_ALLOWED = 0, PERMISSION_NOT_ALLOWED = 1, PERMISSION_DENIED = 2)
createNotification Desktop-Benachrichtigung erstellen

3. Beispiel für eine Desktop-Benachrichtigung
Verwenden wir die Desktop-Benachrichtigungs-API, um eine kleine Funktion zu schreiben: Senden Sie alle 20 Minuten eine Nachricht auf den Desktop, um den Benutzer daran zu erinnern, eine Pause einzulegen.
Der Code lautet wie folgt:

Kopieren Sie den Code
Der Code lautet wie folgt:
if(window.webkitNotifications) {
if(window.webkitNotifications.checkPermission()==0){
setInterval(function(){
var popup = window.webkitNotifications.createNotification("avator.jpg ","Ruhua Warm Reminder: ","Ihre Augen werden blind, wenn Sie längere Zeit vor dem Computer sitzen, machen Sie eine Pause~");
popup.show();
},1000 * 60 * 20);

}else{
window.webkitNotifications.requestPermission();
}
}else{
warning('Der Browser unterstützt keine Desktop-Benachrichtigungen~!');
}

Dann erscheint nach 20 Minuten der Desktop:

Verwandte Etiketten：
html5 notification
Quelle：php.cn
Vorheriger Artikel：Die Lösung, um Internet Explorer zu einem Browser zu machen, der HTML5 unterstützt (mit html5shiv)_html5-Tutorial-Fähigkeiten Nächster Artikel：So machen Sie Browser unter IE9 kompatibel mit HTML5_html5-Tutorial-Tipps
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage