Comentário: As notificações de desktop no HTML5 podem exibir uma caixa de mensagem na janela da página atual. Esta caixa de mensagem abrange a janela da guia. Esse lembrete é mais conveniente quando os usuários abrem várias guias para navegar na página da web e são fáceis de ver.
As notificações de desktop no HTML5 podem exibir uma caixa de mensagem na janela da página atual. Esta caixa de mensagem abrange a janela da guia. Esse lembrete é mais conveniente e fácil para os usuários ver quando os usuários abrem várias guias para navegar nas páginas da web. Atualmente, desde que o kernel do webkit suporta essa função.Esse recurso precisa ser ativado no Chrome no modo HTTP.
A função de lembrete para desktop é implementada pelo objeto Window.WebkitNotificações (WebKit Kernel).
O objeto Window.WebKitNotifications não possui atributos e existem quatro métodos:
1.RequestPermission ()
Este método é usado para solicitar permissão de lembrete de mensagem ao usuário. Se a permissão não for aberta no momento, o navegador exibirá a interface de autorização. Depois que o usuário autoriza, um valor de status (um número inteiro de 0, 1 ou 2) é gerado dentro do objeto:
0: Isso significa que o usuário concorda com o lembrete da mensagem e a função de lembrete de informações só pode ser usada nesse estado;
1: indica o status padrão, o usuário não rejeita nem concorda;
2: indica que o usuário recusa o lembrete da mensagem.
2.CheckPermission ()
Este método é usado para obter o valor de status da permissão solicitada pelo requestPermission ().
3.Createnotification ()
Este método cria uma mensagem de lembrete em uma mensagem pura, que aceita três parâmetros de string:
iconurl: o endereço do ícone exibido na mensagem,
Título: o título da mensagem,
Corpo: Mensagem do conteúdo do texto do corpo
Este método retornará um objeto de notificação, que pode ser definido para mais.
Propriedades e métodos de objeto de notificação:
Dir: ""
ONCLICK: NULL
ONCLOSE: NULL
OnDisplay: function (Event) {
OneError: NULL
ONSWOW: NULL
Substitua: ""
marcação: ""
__proto__: notificação
addEventListener: função addEventListener () {[nativo código]}
Cancelar: function cancel () {[Código nativo]}
Fechar: function Close () {[Código nativo]}
Construtor: Function Notification () {[Código Nativo]}
DispatchEvent: function DispatchEvent () {[Código Nativo]}
RemoneeventListener: function RemoverventListener () {[Código nativo]}
Mostrar: function show () {[nativo code]}
__proto__: objeto
DIR: Defina a direção do arranjo das mensagens, os valores podem ser tomados como Auto (Auto), LTR (da esquerda para a direita), RTL (direita para a esquerda).
Tag: adicione um nome de tag à mensagem. Se esta propriedade estiver definida, quando houver um novo lembrete de mensagem, as mensagens com o mesmo rótulo serão exibidas apenas na mesma caixa de mensagem e a última caixa de mensagem substituirá a anterior. Caso contrário, várias caixas de prompt de mensagem aparecerão, mas o valor máximo exibirá 3 caixas de mensagem, se mais de 3, a notificação de mensagem subsequente será bloqueada.
ONSHOW: gatilhos quando a caixa de mensagem é exibida;
OnClick: Este evento é acionado quando a caixa de mensagem é clicada;
ONCLOSE: gatilhos quando a mensagem é fechada;
OnError: desencadeia o evento quando ocorre um erro;
método:
AddEventListener && RemoneventListener: Geral Add e Remover Métodos de Evento;
Mostrar: Mostrar caixa de lembrete de mensagens;
Feche: feche a caixa de lembrete de mensagem;
Cancelar: Feche a caixa de lembrete de mensagens, assim como fechar;
4.CreateHtmlNotification ()
A diferença entre esse método e CreateNotification () é que ele cria uma mensagem no HTML, aceitando um parâmetro: o URL do arquivo html, e esse método também retorna o objeto de notificação.
Um exemplo:
<! Doctype html>
<html>
<head>
<title> Notificações no HTML5 </ititle>
</head>
<Body>
<morm>
<input type = "button" value = "Enviar notificação" />
</morm>
<script type = "text/javascript">
document.getElementById ("TryNotification"). OnClick = function () {
notificar (math.random ());
};
function notify (tab) {
if (! window.webkitnotificações) {
retornar falso;
}
var permissão = window.webkitNotifications.checkPermission ();
if (permissão! = 0) {
window.webkitNotifications.RequestPermission ();
var requesttime = new Date ();
var waittime = 5000;
var checkperMinisec = 100;
setTimeout (function () {
permissão = window.webkitNotifications.CheckPermission ();
if (permissão == 0) {
createNotification (TAB);
} else if (new date ()-requesttime <waittime) {
setTimeout (argumentos.callee, checkperMinisec);
}
}, checkperMinisec);
} else if (permissão == 0) {
createNotification (TAB);
}
}
função createNotification (tab) {
var showc = 10000;
var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";
var + new date (). tolocaletimestring () + "] feche após" + (mostra os programas/1000) + "segundos";
var Body = "Hello World, sou WebkitNotifications Information";
var popup = window.webkitNotifications.createnotification (ícone, título, corpo);
popup.tag = guia;
popup.ondisplay = function (evento) {
setTimeout (function () {
event.currenttarget.cancel ();
}, ShowSec);
}
popup.show ();
}
</script>
</body>
</html>