久久久久久久999_99精品久久精品一区二区爱城_成人欧美一区二区三区在线播放_国产精品日本一区二区不卡视频_国产午夜视频_欧美精品在线观看免费

<button id="k884w"></button>

標題: Html5新特性Notification實現桌面消息推送 [打印本頁]

作者: heicc 時間: 2016-6-13 14:11
標題: Html5新特性Notification實現桌面消息推送
   序：最近工作使用WorkTile，發現使用Chrome瀏覽器的時候如果有任務下發給我則會在桌面右下角提示（當前瀏覽器為最小化模式）。感覺這個東西蠻有意思的，感覺可以給用戶更好的體驗，于是乎就查詢了一下，發現是Html5的新特性。

0x01：IE內核的瀏覽器還不可以，但在Chrome與Firefox上已經實現了此API。

0x02：代碼簡單直接看吧
       notification.html

      <!DOCTYPE html>
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Html5 桌面消息推送</title>
      </head>
      <body>
        <input type="button" id="btn_Send" value="發送桌面消息" />
        <input type="button" id="btn_Close" value="關閉桌面消息" />
        <script src="http://c.51hei.com/a/a/g/66136371059279.jpg"></script>
        <script src="http://c.51hei.com/a/a/g/66136371028045.jpg"></script>
      </body>
      </html>

      notification.js

      var notif;  // 消息對象
      var i = 0;
      $(document).ready(function () {
        /* 注冊按鈕單擊事件 */
        $('#btn_Send').bind('click', function () {
              if (window.Notification) {  // 判斷瀏覽器是否支持Notification特性，Chrome與Firefox支持，IE內核暫不支持
                 if (Notification.permission == 'granted') { // 判斷瀏覽器是否允許此站點發送桌面消息；granted為允許
                      notif = new Notification('Clown：', {
                    body: '呆子、在嗎？',
                          icon: 'http://taekwondoshow.com/Images/my_1.jpg',
                         tag: ++i // ID，如果ID重復則前者會被覆蓋，如果ID不重復則一直疊加顯示。PS：Chrome最多同時顯示3條，Firefox則沒有限制。。。
                      });


                  notif.onclose = function () { // 當Notification被關閉時觸發
                          alert('消息被關閉了');
                      };
                  notif.onclick = function () { // 當Notification被單擊時觸發
                          alert('消息被單擊了');
                      }
                 } else {
                      Notification.requestPermission();
                 }
              } else {
                alert('當前瀏覽器不支持Notification特性！');
              }
        });
        $('#btn_Close').bind('click', function () {
              if (notif) {
                 notif.close();
              }
        });
      });

歡迎光臨 (http://m.zg4o1577.cn/bbs/)