今回は、H5 でデスクトップ通知を実装するための 注意事項 について、実際のケースを見てみましょう。
具体的なコードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <button id= "button" >有人想加你为好友</button>
<p id= "text" ></p>
;( function (){
if (window.Notification){
var btn = document.getElementById( "button" );
var txt = document.getElementById( "text" );
btn.onclick = function (){
if (Notification.permission == "granted" ){
popNotice();
} else if (Notification.permission != "denied" ){
Notification.requestPermission().then( function (permission){
popNotice()
})
}
};
function popNotice(){
if (Notification.permission == "granted" ){
var notification = new Notification( "你好:" ,{
body: "请问今晚有空吗" ,
icon: "http://image.zhangxinxu.com/左边头像地址"
});
notification.onclick = function (){
txt.innerHTML = new Date ().toTimeString().split( " " )[0]+ "收到信息" ;
notification.close();
}
}
}
} else {
console.log( "浏览器不支持Notification" );
}
})();
|
ログイン後にコピー
Notification.requestPermission() は、通知を許可するかどうかをブラウザーに要求するリクエストであり、Notification.permission のような「granted」「default」のような「3」の値を返します。 「拒否されました」 ユーザーの許可 注意してください、ユーザーはまだ管理していないため、ユーザーはそれを嫌っています
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注意してください。関連記事はPHP中国語サイトにあります!
推奨読書:
H5 を使用して PDF をオンラインでプレビューする方法
H5+C3 を使用して時計効果を実現する方法
以上がH5 はデスクトップ通知を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。