Comments: Web notifications in HTML5 can pop up a message box on the current page, which is displayed across tabs, the reminder is convenient, so that users can easily see web notifications in HTML5. A message box is displayed on the current page, which is displayed across tabs, this is a convenient reminder when you open multiple tabs to browse the Web page, which is easy for users to see. Currently, only the webkit kernel supports this function.
This function can be enabled only when a webpage is opened in http mode in chrome.
The desktop reminder function is implemented by the window. webkitNotifications object (webkit kernel ).
The window. webkitNotifications object has no attributes. There are four methods:
1. requestPermission ()
This method is used to apply for the message reminder permission to the user. If this permission is not currently available, the authorization page is displayed in the browser, generate a status value (an integer of 0, 1, or 2) within the object ):
0: indicates that the user agrees to the Message reminder. The message reminder function can be used only in this status;
1: indicates the default status. The user has neither rejected nor agreed;
2: indicates that the user rejects the message reminder.
2. checkPermission ()
This method is used to obtain the status value of the permission applied for by requestPermission.
3. createNotification ()
This method creates a notification message in the form of a pure message. It accepts three string parameters:
IconURL: the icon address displayed in the message,
Title: Message title,
Body: Message body Text Content
This method returns a Notification object. You can make more settings for this object.
Attributes and methods of Notification objects:
The Code is as follows:
Dir :""
Onclick: null
Onclose: null
Ondisplay: function (event ){
Onerror: null
Onshow: null
ReplaceId :""
Tag :""
_ Proto __: Notification
AddEventListener: function addEventListener () {[native code]}
Cancel: function cancel () {[native code]}
Close: function close () {[native code]}
Constructor: function Notification () {[native code]}
DispatchEvent: function dispatchEvent () {[native code]}
RemoveEventListener: function removeEventListener () {[native code]}
Show: function show () {[native code]}
_ Proto __: Object
Dir: sets the message arrangement direction. values include "auto", "ltr" (left to right), and "rtl" (right to left ).
Tag: Add a tag name for the message. If this attribute is set, when there is a new message reminder, messages with the same tag are only displayed in the same message box, and the previous message box is replaced by the previous one; otherwise, multiple message prompt boxes are displayed, however, three message boxes and more than three message boxes are displayed at most, and subsequent message notifications are blocked.
Onshow: this event is triggered when the message box is displayed;
Onclick: this event is triggered when the message box is clicked;
Onclose: this event is triggered when the message is closed;
Onerror: this event is triggered when an error occurs;
Method:
AddEventListener & removeEventListener: the general method for adding and removing events;
Show: displays the message reminder box;
Close: close the message reminder box;
Cancel: close the message reminder box, which is the same as close;
4. createHTMLNotification ()
This method differs from createNotification () in that it creates a message in HTML mode and accepts the URL of the parameter: HTML file. This method also returns the Notification object.
One instance:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> events in HTML5 </title>
</Head>
<Body>
<Form>
<Input id = "trynotification" type = "button" value = "Send notification"/>
</Form>
<Script type = "text/javascript">
Document. getElementById ("trynotification"). onclick = function (){
Notify (Math. random ());
};
Function notify (tab ){
If (! Window. webkitNotifications ){
Return false;
}
Var permission = window. webkitconfigurations. checkPermission ();
If (permission! = 0 ){
Window. webkitconfigurications. requestPermission ();
Var requestTime = new Date ();
Var waitTime = 5000;
Var checkPerMiniSec = 100;
SetTimeout (function (){
Permission = window. webkitconfigurations. checkPermission ();
If (permission = 0 ){
CreateNotification (tab );
} Else if (new Date ()-requestTime <waitTime ){
SetTimeout (arguments. callee, checkPerMiniSec );
}
}, CheckPerMiniSec );
} Else if (permission = 0 ){
CreateNotification (tab );
}
}
Function createNotification (tab ){
Var showSec = 10000;
Var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png ";
Var title = "[" + new Date (). toLocaleTimeString () + "] close after" + (showSec/1000) + "seconds ";
Var body = "hello world, I am webkitNotifications informations ";
Var popup = window. webkitNotifications. createNotification (icon, title, body );
Popup. tag = tab;
Popup. ondisplay = function (event ){
SetTimeout (function (){
Event. currentTarget. cancel ();
}, ShowSec );
}
Popup. show ();
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
