<p>html5 浏览器消息通知（Notification）摘抄自DISCUZ源码</p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas',monospace;font-size:11.3pt;"><span style="color:#f92672;">function </span><span style="font-style:italic;">Html5notification</span>() {<br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">h5n </span><span style="color:#f92672;">= new </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">Object</span>();<br/><br/> <span style="color:#64a2a2;">h5n</span>.<span style="color:#4ac60a;">issupport </span><span style="color:#f92672;">= function</span>() {<br/> <span style="color:#f92672;">return </span><span style="color:#e6db74;">'Notification' </span><span style="color:#f92672;">in </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">window</span>;<br/> };<br/><br/> <span style="color:#64a2a2;">h5n</span>.<span style="color:#4ac60a;">shownotification </span><span style="color:#f92672;">= function</span>(<span style="color:#fd971f;font-style:italic;">replaceid</span>, <span style="color:#fd971f;font-style:italic;">url</span>, <span style="color:#fd971f;font-style:italic;">imgurl</span>, <span style="color:#fd971f;font-style:italic;">subject</span>, <span style="color:#fd971f;font-style:italic;">message</span>) {<br/> <span style="color:#f92672;">if </span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">Notification</span>.<span style="color:#660e7a;font-weight:bold;">permission </span><span style="color:#f92672;">=== </span><span style="color:#e6db74;">'granted'</span>) {<br/> <span style="color:#a6e22e;">sendit</span>();<br/> } <span style="color:#f92672;">else if </span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">Notification</span>.<span style="color:#660e7a;font-weight:bold;">permission </span><span style="color:#f92672;">!== </span><span style="color:#e6db74;">'denied'</span>) {<br/> <span style="color:#660e7a;font-weight:bold;font-style:italic;">Notification</span>.<span style="font-style:italic;">requestPermission</span>().<span style="color:#4ac60a;">then</span>(<span style="color:#f92672;">function </span>(<span style="color:#fd971f;font-style:italic;">perm</span>) {<br/> <span style="color:#f92672;">if </span>(<span style="color:#fd971f;font-style:italic;">perm </span><span style="color:#f92672;">=== </span><span style="color:#e6db74;">'granted'</span>) {<br/> <span style="color:#a6e22e;">sendit</span>();<br/> }<br/> });<br/> }<br/> <span style="color:#f92672;">function </span><span style="color:#a6e22e;">sendit</span>() {<br/> <span style="color:#f92672;">var </span><span style="color:#64a2a2;">n </span><span style="color:#f92672;">= new </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">Notification</span>(<span style="color:#fd971f;font-style:italic;">subject</span>, {<br/> <span style="color:#660e7a;font-weight:bold;">tag</span><span style="color:#f92672;">: </span><span style="color:#fd971f;font-style:italic;">replaceid</span>,<br/> <span style="color:#660e7a;font-weight:bold;">icon</span><span style="color:#f92672;">: </span><span style="color:#fd971f;font-style:italic;">imgurl</span>,<br/> <span style="color:#660e7a;font-weight:bold;">body</span><span style="color:#f92672;">: </span><span style="color:#fd971f;font-style:italic;">message<br/></span><span style="color:#fd971f;font-style:italic;"> </span>});<br/> <span style="color:#64a2a2;">n</span>.<span style="color:#660e7a;font-weight:bold;">onclick </span><span style="color:#f92672;">= function </span>(<span style="color:#fd971f;font-style:italic;">e</span>) {<br/> <span style="color:#fd971f;font-style:italic;">e</span>.<span style="color:#4ac60a;">preventDefault</span>();<br/> <span style="color:#660e7a;font-weight:bold;font-style:italic;">window</span>.<span style="color:#4ac60a;">open</span>(<span style="color:#fd971f;font-style:italic;">url</span>, <span style="color:#e6db74;">'_blank'</span>);<br/> };<br/> }<br/> };<br/><br/> <span style="color:#f92672;">return </span><span style="color:#64a2a2;">h5n</span>;<br/>}</pre><p>使用方法<br/></p><pre style="background-color:#262e37;color:#ffffff;font-family:'Consolas',monospace;font-size:11.3pt;"><span style="color:#f92672;">var </span><span style="color:#660e7a;font-weight:bold;font-style:italic;">h5n </span><span style="color:#f92672;">= new </span><span style="font-style:italic;">Html5notification</span>();<br/><span style="color:#f92672;">if</span>(<span style="color:#660e7a;font-weight:bold;font-style:italic;">h5n</span>.<span style="color:#4ac60a;">issupport</span>()) {<br/><span style="color:#660e7a;font-weight:bold;font-style:italic;">h5n</span>.<span style="color:#4ac60a;">shownotification</span>(<span style="color:#e6db74;">'tag'</span>, <span style="color:#e6db74;">'</span><span style="color:#e6db74;font-family:'宋体',monospace;">点击跳转链接</span><span style="color:#e6db74;">'</span>, <span style="color:#e6db74;">'logo</span><span style="color:#e6db74;font-family:'宋体',monospace;">图标</span><span style="color:#e6db74;">'</span>, <span style="color:#e6db74;">'</span><span style="color:#e6db74;font-family:'宋体',monospace;">新的短消息</span><span style="color:#e6db74;">'</span>, <span style="color:#e6db74;">'</span><span style="color:#e6db74;font-family:'宋体',monospace;">有新的短消息，快去看看吧</span><span style="color:#e6db74;">'</span>);<br/>}</pre><p><br/></p>
相关文章
