Comentario: Las notificaciones de escritorio en HTML5 pueden aparecer un cuadro de mensaje en la ventana de página actual. Este cuadro de mensaje abarca la ventana de la pestaña. Este recordatorio es más conveniente cuando los usuarios abren múltiples pestañas para explorar la página web y son fáciles de ver.
Las notificaciones de escritorio en HTML5 pueden aparecer un cuadro de mensaje en la ventana de página actual. Este cuadro de mensaje abarca la ventana de la pestaña. Este recordatorio es más conveniente y fácil de ver para los usuarios cuando los usuarios abren múltiples pestañas para navegar por las páginas web. Actualmente, siempre que el kernel webkit admita esta función.Esta característica debe habilitarse en Chrome en modo HTTP.
La función de recordatorio de escritorio es implementada por Window.webkitnotifications Object (WebKit Kernel).
El objeto Window.webkitnotifications no tiene atributos, y hay cuatro métodos:
1.RequestPermission ()
Este método se utiliza para solicitar el permiso de recordatorio de mensajes al usuario. Si el permiso no se abre actualmente, el navegador aparecerá en la interfaz de autorización. Después de que el usuario autoriza, se genera un valor de estado (un entero de 0, 1 o 2) dentro del objeto:
0: Significa que el usuario acepta el recordatorio de mensajes, y la función de recordatorio de información solo puede usarse en este estado;
1: Indica el estado predeterminado, el usuario no rechaza ni está de acuerdo;
2: Indica que el usuario rechaza el recordatorio de mensajes.
2.CheckPermission ()
Este método se utiliza para obtener el valor de estado del permiso solicitado por requestpermission ().
3.CreateNotification ()
Este método crea un mensaje de recordatorio en un mensaje puro, que acepta tres parámetros de cadena:
IconUrl: la dirección de icono que se muestra en el mensaje,
Título: El título del mensaje,
Cuerpo: Mensaje Contenido de texto del cuerpo
Este método devolverá un objeto de notificación, que se puede establecer para más.
Propiedades y métodos de objeto de notificación:
Dir: ""
OnClick: NULL
Onclose: NULL
onDisplay: function (evento) {
OneError: NULL
Onshow: NULL
Reemplazo: ""
etiqueta: ""
__proto__: notificación
addEventListener: function addEventListener () {[código nativo]}
cancelar: function cancel () {[código nativo]}
Cerrar: function sears () {[código nativo]}
constructor: function notification () {[código nativo]}
DispatchEvent: function DispatchEvent () {[Código nativo]}
RemoVentListener: function RemoVeVentListener () {[Código nativo]}
show: function show () {[código nativo]}
__proto__: objeto
Dir: Establezca la dirección de la disposición de los mensajes, los valores se pueden tomar como Auto (Auto), LTR (de izquierda a derecha), RTL (derecha a izquierda).
Etiqueta: Agregue un nombre de etiqueta al mensaje. Si esta propiedad está configurada, cuando hay un nuevo recordatorio de mensajes, los mensajes con la misma etiqueta solo se mostrarán en el mismo cuadro de mensaje, y el último cuadro de mensaje reemplazará el anterior. De lo contrario, aparecerán múltiples cuadros de solicitud de mensaje, pero el valor máximo mostrará 3 cuadros de mensaje, si es más de 3, se bloqueará la notificación de mensaje posterior.
Onshow: se desencadena cuando se muestra el cuadro de mensaje;
OnClick: este evento se activa cuando se hace clic en el cuadro de mensaje;
OnClose: se desencadena cuando el mensaje está cerrado;
OnError: desencadena el evento cuando ocurre un error;
método:
AddEventListener && RemoLEventListener: General Agregar y eliminar métodos de evento;
Mostrar: Mostrar el cuadro de recordatorio de mensajes;
Cerrar: cierre el cuadro de recordatorio del mensaje;
Cancelar: cierre el cuadro de recordatorio de mensajes, al igual que Cerrar;
4.Createhtmlnotification ()
La diferencia entre este método y createnotificación () es que crea un mensaje en HTML, aceptando un parámetro: la URL del archivo HTML, y este método también devuelve el objeto de notificación.
Un ejemplo:
<! Doctype html>
<html>
<Evista>
<title> notificaciones en html5 </title>
</ablo>
<Body>
<form>
<input type = "button" value = "Enviar notificación" />
</form>
<script type = "text/javaScript">
document.getElementById ("TryNoTification"). onClick = function () {
notificar (math.random ());
};
función notificar (tab) {
if (! window.webkitnotifications) {
devolver falso;
}
VAR Permission = Window.WebKitNotifications.CheckPermission ();
if (permiso! = 0) {
Window.Webkitnotifications.RequestPermission ();
var requesttime = new Date ();
var waittime = 5000;
var checkPerminisec = 100;
setTimeOut (function () {
Permiso = Window.WebKitnotifications.CheckPermission ();
if (permiso == 0) {
createnotificación (pestaña);
} else if (new Date ()-Solicitartime <WaitTime) {
setTimeout (argumentos.callee, checkperminisec);
}
}, checkPerminisec);
} else if (permiso == 0) {
createnotificación (pestaña);
}
}
function createNotification (tab) {
var showsEC = 10000;
var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";
var + new Date (). TOLOCALETIMETRING () + "] Cerrar después de" + (showsec/1000) + "segundos";
var cuerpo = "Hola mundo, soy información webkitnotifications";
var PopUp = Window.webkitnotifications.createNotification (icono, título, cuerpo);
popup.tag = tabs;
popup.ondisplay = function (evento) {
setTimeOut (function () {
event.currentTarget.cancel ();
}, showsec);
}
popup.show ();
}
</script>
</body>
</html>