Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the application of HTML5's Notifycations. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Desktop reminder in HTML5 (network notification) can place a message box across Tab windows on the current page window, which is more convenient and easy for users to see when they open multiple tab to browse the web. As long as the webkit kernel supports this feature.

This function needs to open a web page in http mode under chrome.

Enable. Desktop reminders are implemented by window.webkitNotifications objects (webkit kernel)

The window.webkitNotifications object has no properties, and there are four methods:

1.requestPermission ()

This method is used to apply for message reminder permission from the user. If the permission is not currently open, the browser will open the authorization interface. After the user is authorized, a status value (an integer of 0, 1 or 2) is generated inside the object:

0: indicates that the user agrees with the message reminder, and the information reminder function can only be used in this state.

1: indicates status, and the user neither rejects nor agrees

2: indicates that the user rejects the message reminder

2.checkPermission ()

This method is used to get the status value of the permission requested by requestPermission ().

3.createNotification ()

This method creates a reminder message as a pure message, which accepts three string parameters:

IconURL: the icon planting address of the message in the display

Title: the title of the message

Body: message body text content

This method returns a Notification object for which more settings can be made. Notification

Properties and methods of the object:

The copy code is as follows:

DIR: ""

Onclick of: empty

OnClose of: empty

Ondisplay: features (events) {

Onerror of: empty

In OnShow: empty

ReplaceId: ""

Label: "

_ _ PR oto__: notification

AddEventListener: addEventListener () {[local code]} of the feature

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 distribution direction of the message, which can be taken to "auto" (automatic), "ltr" (from left to right), "rtl" (from right to left).

Tag: adds a tag signature to the message. If you set this property, when there is a new message reminder, messages with the same label will only be displayed in the same message box, and the latter message box will replace the previous one, otherwise multiple message prompt boxes will appear, but the maximum value will display 3 message boxes, more than 3. Subsequent message notifications will be blocked.

In OnShow: this event is triggered when the message box is displayed

Onclick: triggers the event when the message box is clicked

In OnClose: this event is triggered when the message is closed

Onerror: this event is triggered when an error occurs

Methods:

AddEventListener & & removeEventListener: regular additions and

Delete event method; display: display message reminder box

Turning off: closing the message reminder box

Cancel: close the message reminder box, just like close

4.createHTMLNotification ()

This method differs from createNotification () in that it creates the message as HTML and accepts one parameter: the URL of the HTML file, which also returns the Notification object.

An example:

The copy code is as follows:

Notifications in HTML5

Document.getElementById ("trynotification"). Onclick = function () {

Notify (Math.random ())

}

Function notify (tab) {

If (! Window.webkitNotifications) {

Return to false

}

VarPermission = window.webkitNotifications.checkPermission ()

If (permission! = 0) {

Window.webkitNotifications.requestPermission ()

Var requestTime = new Date ()

Var waitTime = 5000

Var checkPerMiniSec = 100

SetTimeout (function () {

Permission = window.webkitNotifications.checkPermission ()

If (permission = = 0) {

CreateNotification (tab)

} otherwise if (new Date ()-requestTime)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.