javascript-Browser Message Alert

Source: Internet
Author: User

How to let the user in the browser to minimize the state can also be timely to receive message reminders? The problem is to be faced as a webrd. There are approximately two scenarios: one is similar to desktop notifications and one is similar to QQ reminders (flashing then highlighted in the system taskbar), followed by the following studies:

Desktop Reminders:

This H5 has a powerful API. Yes, that's notification. Https://developer.mozilla.org/en-US/docs/Web/API/notification first to understand, very detailed, browser different to its support is different, simply say that there is a compatibility problem, And I want to say is based on a small class library https://github.com/ttsvetko/HTML5-Desktop-Notifications notification, its support: ie9+, Safari6, Firefox, Chrome; All right, the crystallization of the predecessor, I am a brick, the following is attached to a simple small demo:

PS: Useful class library, is practiced hand use of. Actually still use class library bar;

function _notification (title,option) {
var Notification = window. Notification | | window.moznotification | | Window.webkitnotification;
Notification.permission = = = "Granted"? Creatnotification (title, option): Requestpermission (title, option);
function creatnotification (title, option) {
var instance = new Notification (title, option);
Instance.onclick = function () {
Console.log (' onclick ');
};
Instance.onerror = function () {
Console.log (' onerror ');
};
Instance.onshow = function () {
Console.log (' onshow ');
};
Instance.onclose = function () {
Console.log ("Close")
}
}
function requestpermission (title, option) {
Notification.requestpermission (function (status) {
Status = = = "Granted"? Creatnotification (title, option): Failnotification (title);
});
}
function Failnotification (title) {
var timer;
return function (timer) {
var index = 0;
Clearinterval (timer);
Timer = setinterval (function () {
if (index%2) {
Document.head.getElementsByTagName ("title") [0].innerhtml = ' "'" + title;
}else {
Document.head.getElementsByTagName ("title") [0].innerhtml = ' new message ' ' + title;
}
index++;
if (Index > 20) {
Clearinterval (timer);
}
}, 500);
} (timer);
}
}

Task bar Reminders:

This is really a problem; As for the ultimate solution of the current author has not been studied, but window.open this pop-up window will trigger flashing reminders, but need to solve the user no pop-up window, you can simulate the From submission | | Hyperlinks (a) | | Using browser bubbling, these methods can solve most of the interception situation; But this is not what the author wants, because the hint content is always bad in the pop-up window, the user is very easy to circle, how to have a hint on more than one title bar ... Very annoying, seemingly memory overflow can also, but this even, unless the brain water ...; Look forward to the great God guidance. ;

javascript-Browser Message Alert

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.