天天看點

Web的桌面提醒(Popup)

大多數Windows程式都有桌面提醒(Popup)功能,如Msn Messenger,Outlook2003,FoxMail,SharpReader等,對使用者來說可以非常的友善最新的資訊。

在Web中借用IE5.5+的Popup,也可以實作類似的功能,在CnForums1.2中新增了一種特性就是類似于Outlook2003一樣,當有新文章/私人留言時就有Popup提示,如圖:

Web的桌面提醒(Popup)

現在就技術問題介紹一下:

一,什麼是Popup

在IE5.5+中開始支援的Popup視窗有很多很特别的特性:

  • Popup視窗可以超出浏覽器視窗區域;
  • 可以不用擔心被下拉框、flash、Iframe等這些東西遮擋;
  • 即時視窗沒有焦點,Popup視窗也可以彈出并顯示
  • 一個Popup視窗打開後,當在它的區域以外點選或者另一個Popup視窗被打開時都會自動關閉;
  • Popup視窗是沒有焦點的;
  • 使用者不能改變Popup視窗大小;
  • Popup視窗中的内容是不能被選擇的;
  • ......

 隻是Web下的Popup比起Windows中的Popup還是弱一些,但是已經夠用了。Msdn上對Popup有非常詳細的介紹“Using the Popup Object (Internet Explorer - DHTML) ”

二,怎麼建立一個Popup

Msdn上的示例代碼:      
Web的桌面提醒(Popup)

// 建立Popup對象

Web的桌面提醒(Popup)

var oPopup = window.createPopup();

Web的桌面提醒(Popup)

// Popup對象和Window對象一樣,裡面包含了一個完整的HTML文檔

Web的桌面提醒(Popup)

var oPopupBody = oPopup.document.body;

Web的桌面提醒(Popup)
Web的桌面提醒(Popup)

// 在Body中插入HTML

Web的桌面提醒(Popup)

oPopupBody.innerHTML = "Display some <B>HTML</B> here.";

Web的桌面提醒(Popup)

// 設定顯示的位置、大小、參照物

Web的桌面提醒(Popup)

oPopup.show(100, 100, 200, 50, document.body);

Web的桌面提醒(Popup)

三,Popup的顯示

多個Popup不能共存(Popup中建立Popup除外),是以web中的Popup不友善像Msn Messenger的Popup提示那樣“爬樓梯”,是以最簡單有效的方法就是像Outlook2003的Popup一樣,逐個Popup提醒。

(參考WebMessenger的實作)用Js建個隊列,将需要Popup提示的内容都放在隊列中,用一個定時器,定時從隊列中取一個Popup,每個Popup顯示7秒。

四,怎麼知道有新文章

在Web程式中,隻能通過“拉”的技術,即定時向伺服器發送請求——通過定時重新整理或者是xmlhttp的Get。

我們需要有個時間戳來記錄最後請求時間,這樣就好根據這個時間戳來擷取時間戳之後的文章。

如果每次根據時間戳來擷取最新文章,伺服器負荷比較大,因為并不是每次請求都有新文章的,優化一下,再給每個線上使用者設定有無新文章、有無新留言的狀态位,當發表新文章後更新每個人的“有無新帖”狀态位。這樣每次請求時先判斷有沒有新文章,如果有新文章,才擷取所有文章的标題和内容簡要。

上一篇: 寫總結
下一篇: 提醒