時常在某些朋友的blog中看到一個可供聊天的對話框，它能讓正在瀏覽這個站點的用戶進行聊天。不過在我看來，這個功能形同雞肋——誰會知道哪些人正在瀏覽，又有哪些人可以聊天呢？不過今天在瀏覽LoveCherry的blog時發現在左側邊欄里出現了一個可供聊天的Live Messenger對話框，頓時讓我產生了興趣。不過知道這個東東的人似乎還不多，因此只能動用搜索引擎了（在這里想再說一句多余的話，因為我時常會收到一些類似于“ASP.NET AJAX框架哪里可以下載”之類的問題，所以我建議那些朋友一定要養成先搜再問的習慣）。那么我們就先來看看這個東西具體是什么樣的吧。
首先，我們可以訪問這個頁面（http://settings.messenger.live.com/applications/CreateHtml.aspx），從中可以看出微軟提供了兩種方式供用戶使用Live Messenger的Web聊天功能。
提供一個鏈接（），點擊它則會彈出一個頁面可供聊天——于是別人就可以通過這個頁面與您聯系了。值得一提的是，圖標也會根據用戶當時的狀態不同而改變。
提供了一段代碼，在頁面上直接放入一塊較小的區域顯示聊天頁面。很顯然，這是一個iframe。
在進行了簡單的試驗（使用Web Live Messenger和自己的Live Messenger聊天）之后，發現這個小玩意兒的功能還是比較可圈可點的。
可以選擇是否允許匿名用戶使用Web Live Messenger（http://settings.messenger.live.com/applications/WebSettings.aspx）。
性能很不錯，基本上沒有明顯延遲，當然這可能和用戶本身的網絡條件有關。
聊天的體驗比想象中高很多，我們可以在Web Live Messenger的界面上發現“最近一條信息收于XXXX年X月X日 XX:XX:XX”以及“XXXX正在輸入消息”的字樣。此外，我們聊天中使用的特殊字體和表情符號也能正確顯示。
我嘗試通過Web Live Messenger找出對方的IM賬號，但似乎它對于這點有著很好的保護，這意味著如果用戶將Web Live Messenger放在blog上，可以避免因為泄露Email地址而遭受垃圾郵件地攻擊。
試驗了之后，我決定將其放在我的blog中，不過到底該怎么放呢？
Live Demo
現在訪問LoveCherry的blog會發現他已經將Web Live Messenger從邊欄撤下了。邊欄實在太窄，如果使用一個稍微長一些的Nick就會被頂的很高，而且由于一行能顯示的文字太少，用戶體驗也很差。最后，我使用了“傳統”網頁內嵌聊天對話框的做法。如果您現在正在瀏覽我的blog，就會發現頁面的右下角出現了一個矩形的Windows Live Messenger的圖片，點擊它則會顯示出一個300*400的Web Live Messenger聊天對話框。如果您覺得這個對話框擋著頁面上的內容了，就可以點擊對話框左上角的關閉按鈕，這樣頁面上又只剩下了右下角的矩形圖片了。同時，我選擇了淡入淡出的效果來顯示/隱藏Web Live Messenger聊天對話框。這么做的目的只有一個，那就是讓用戶體驗更酷一些。:)
現在大家可以試驗一下Web Live Messenger的聊天功能了。不過請大家能夠訪問http://settings.messenger.live.com/applications/CreateHtml.aspx，在頁面中和自己的Live Messenger進行聊天。如果您直接在我的blog上測試Web Live Messenger，我實在會忙不過來。:(
實現
實現并不復雜，我總共用了大約2個小時，其中還包括學習了一些jQuery的功能所花的時間。唉，沒想到我居然到現在才第一次使用這個如此了得的JavaScript框架。不得不說，如果您正在尋找一款方便您開發前端應用程序的JavaScript框架，并且希望它足夠的小，那么jQuery很可能就是您需要的。與它強大的功能不相稱的是迷你的體積。一個經過混淆，還沒有Gzip壓縮的jQuery腳本文件才26K大小，但是它帶給你的便利可以幫您節省大量的工作。
那么我們現在就開始吧，首先，我們需要讓Web Live Messenger的聊天對話框能夠永遠顯示在頁面的可視范圍之內。要實現這個功能，關鍵還是在于對頁面中元素尺寸的計算。請看如下代碼：
<script language="javascript" type="text/javascript">
function getClientBounds()
{
var clientWidth;
var clientHeight;
if ($.browser.msie)
{
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
}
else if ($.browser.safari)
{
clientWidth = window.innerWidth;
clientHeight = window.innerHeight;
}
else if ($.browser.opera)
{
clientWidth = Math.min(window.innerWidth,
document.body.clientWidth);
clientHeight = Math.min(window.innerHeight,
document.body.clientHeight);
}
else
{
clientWidth = Math.min(window.innerWidth,
document.documentElement.clientWidth);
clientHeight = Math.min(window.innerHeight,
document.documentElement.clientHeight);
}
return { width : clientWidth, height : clientHeight };
}
function resetLiveMessengerPosition()
{
var clientBounds = getClientBounds();
var container = document.getElementById("liveMessengerContainer");
var scrollLeft = (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft);
var scrollTop = (document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop);
var containerLeft = scrollLeft + clientBounds.width -
container.clientWidth – 5;
var containerTop = scrollTop + clientBounds.height -
container.clientHeight;
$("#liveMessengerContainer").css(
{top : containerTop + "px", left : containerLeft + "px"});
}
<script>
以上getClientBounds方法通過判斷瀏覽器類型來得到頁面顯示區域的精確尺寸，而resetLiveMessengerPosition方法根據liveMessengerContainer元素的尺寸重設該容器在瀏覽器中的位置。這兩個方法談不上“技術”，而更像是一種“經驗”，它們都是我屬于所收藏的JavaScript代碼，如果大家需要的話也可以保留，或者需要時再來我的blog查找（其實我以前也有文章用到過這些方法）。需要注意的是，如果您使用了的是IE瀏覽器，在某些的頁面上可能會需要通過document.documentElement.clientWidth來獲得代碼（clientHeight也一樣），具體原因我正在調查，大家在使用時也請注意這點。
哎？那么resetLiveMessengerPosition方法該在什么時候調用呢？先不著急，我們再來實現Web Live Messenger的顯示/隱藏，以及淡入淡出效果——為什么放在一起實現了？因為我們用到了jQuery框架。請看如下代碼：
<div id="liveMessengerContainer" style="position:absolute;">
<div style="border: solid 1px black; width:160;
height: 39px; cursor:pointer;
background-image:url(Messenger_Header_bg.gif)"
id="liveMessengerThumb">
<img src="Messenger_logo_beta.gif"
alt="使用Live Messenger聯系我"
style="margin: 10px 10px 0px 9px;"/>
</div>
<table border="0" cellpadding="0" cellspacing="0"
id="liveMessengerPanel">
<tr>
<td valign="top">
<img id="hideLiveMessengerPanel"
style="cursor:pointer; margin-right: 3px;"
src="Messenger_close_sm.gif" alt="關閉" />
</td>
<td>
<iframe
src="..." width="300" frameborder="0"
style="border: solid 1px black; width: 300px;
height: 400px;"></iframe>
</td>
</tr>
</table>
<div>
<script language="javascript" type="text/javascript">
$("#liveMessengerPanel").hide();
$(document).ready(function(){
$(window).scroll(resetLiveMessengerPosition);
$(window).resize(resetLiveMessengerPosition);
resetLiveMessengerPosition();
$("#liveMessengerThumb").click(function(){
$("#liveMessengerThumb").fadeOut(500, function(){
$("#liveMessengerPanel").fadeIn(500, function(){
resetLiveMessengerPosition();
});
resetLiveMessengerPosition();
});
});
$("#hideLiveMessengerPanel").click(function(){
$("#liveMessengerPanel").fadeOut(500, function(){
$("#liveMessengerThumb").fadeIn(500, function(){
resetLiveMessengerPosition();
});
resetLiveMessengerPosition();
});
});
});
<script>
liveMessengerContainer容器中的內容我就不進行太多解釋了。同樣略過的還有jQuery的基本使用，不過相信有一定JavaScript基礎的朋友也能比較輕松地看懂。以上JavaScript代碼的第一句隱藏了聊天對話框，接著在jQuery中經典的$(document).ready事件中對以有的元素進行操作。首先，我們要求在用戶移動了滾動條（scroll），或者改變了瀏覽器大?。╮esize）時重新設置容器的位置。需要注意的是，我們接著需要顯式調用resetLiveMessengerPosition方法來對容器的位置進行初始化。然后jQuery開始展現了它的神奇之處，短短幾行代碼即完成了淡入淡出的切換功能，讓人嘆為觀止。
至此，在頁面中嵌入一個Web Live Messenger的工作就完成了。
