時(shí)常在某些朋友的blog中看到一個(gè)可供聊天的對話框，它能讓正在瀏覽這個(gè)站點(diǎn)的用戶進(jìn)行聊天。不過在我看來，這個(gè)功能形同雞肋——誰會知道哪些人正在瀏覽，又有哪些人可以聊天呢？不過今天在瀏覽LoveCherry的blog時(shí)發(fā)現(xiàn)在左側(cè)邊欄里出現(xiàn)了一個(gè)可供聊天的Live Messenger對話框，頓時(shí)讓我產(chǎn)生了興趣。不過知道這個(gè)東東的人似乎還不多，因此只能動用搜索引擎了（在這里想再說一句多余的話，因?yàn)槲視r(shí)常會收到一些類似于“ASP.NET AJAX框架哪里可以下載”之類的問題，所以我建議那些朋友一定要養(yǎng)成先搜再問的習(xí)慣）。那么我們就先來看看這個(gè)東西具體是什么樣的吧。
首先，我們可以訪問這個(gè)頁面（http://settings.messenger.live.com/applications/CreateHtml.aspx），從中可以看出微軟提供了兩種方式供用戶使用Live Messenger的Web聊天功能。
提供一個(gè)鏈接（），點(diǎn)擊它則會彈出一個(gè)頁面可供聊天——于是別人就可以通過這個(gè)頁面與您聯(lián)系了。值得一提的是，圖標(biāo)也會根據(jù)用戶當(dāng)時(shí)的狀態(tài)不同而改變。
提供了一段代碼，在頁面上直接放入一塊較小的區(qū)域顯示聊天頁面。很顯然，這是一個(gè)iframe。
在進(jìn)行了簡單的試驗(yàn)（使用Web Live Messenger和自己的Live Messenger聊天）之后，發(fā)現(xiàn)這個(gè)小玩意兒的功能還是比較可圈可點(diǎn)的。
可以選擇是否允許匿名用戶使用Web Live Messenger（http://settings.messenger.live.com/applications/WebSettings.aspx）。
性能很不錯(cuò)，基本上沒有明顯延遲，當(dāng)然這可能和用戶本身的網(wǎng)絡(luò)條件有關(guān)。
聊天的體驗(yàn)比想象中高很多，我們可以在Web Live Messenger的界面上發(fā)現(xiàn)“最近一條信息收于XXXX年X月X日 XX:XX:XX”以及“XXXX正在輸入消息”的字樣。此外，我們聊天中使用的特殊字體和表情符號也能正確顯示。
我嘗試通過Web Live Messenger找出對方的IM賬號，但似乎它對于這點(diǎn)有著很好的保護(hù)，這意味著如果用戶將Web Live Messenger放在blog上，可以避免因?yàn)樾孤禘mail地址而遭受垃圾郵件地攻擊。
試驗(yàn)了之后，我決定將其放在我的blog中，不過到底該怎么放呢？
Live Demo
現(xiàn)在訪問LoveCherry的blog會發(fā)現(xiàn)他已經(jīng)將Web Live Messenger從邊欄撤下了。邊欄實(shí)在太窄，如果使用一個(gè)稍微長一些的Nick就會被頂?shù)暮芨?，而且由于一行能顯示的文字太少，用戶體驗(yàn)也很差。最后，我使用了“傳統(tǒng)”網(wǎng)頁內(nèi)嵌聊天對話框的做法。如果您現(xiàn)在正在瀏覽我的blog，就會發(fā)現(xiàn)頁面的右下角出現(xiàn)了一個(gè)矩形的Windows Live Messenger的圖片，點(diǎn)擊它則會顯示出一個(gè)300*400的Web Live Messenger聊天對話框。如果您覺得這個(gè)對話框擋著頁面上的內(nèi)容了，就可以點(diǎn)擊對話框左上角的關(guān)閉按鈕，這樣頁面上又只剩下了右下角的矩形圖片了。同時(shí)，我選擇了淡入淡出的效果來顯示/隱藏Web Live Messenger聊天對話框。這么做的目的只有一個(gè)，那就是讓用戶體驗(yàn)更酷一些。:)
現(xiàn)在大家可以試驗(yàn)一下Web Live Messenger的聊天功能了。不過請大家能夠訪問http://settings.messenger.live.com/applications/CreateHtml.aspx，在頁面中和自己的Live Messenger進(jìn)行聊天。如果您直接在我的blog上測試Web Live Messenger，我實(shí)在會忙不過來。:(
實(shí)現(xiàn)
實(shí)現(xiàn)并不復(fù)雜，我總共用了大約2個(gè)小時(shí)，其中還包括學(xué)習(xí)了一些jQuery的功能所花的時(shí)間。唉，沒想到我居然到現(xiàn)在才第一次使用這個(gè)如此了得的JavaScript框架。不得不說，如果您正在尋找一款方便您開發(fā)前端應(yīng)用程序的JavaScript框架，并且希望它足夠的小，那么jQuery很可能就是您需要的。與它強(qiáng)大的功能不相稱的是迷你的體積。一個(gè)經(jīng)過混淆，還沒有Gzip壓縮的jQuery腳本文件才26K大小，但是它帶給你的便利可以幫您節(jié)省大量的工作。
那么我們現(xiàn)在就開始吧，首先，我們需要讓W(xué)eb Live Messenger的聊天對話框能夠永遠(yuǎn)顯示在頁面的可視范圍之內(nèi)。要實(shí)現(xiàn)這個(gè)功能，關(guān)鍵還是在于對頁面中元素尺寸的計(jì)算。請看如下代碼：
<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方法通過判斷瀏覽器類型來得到頁面顯示區(qū)域的精確尺寸，而resetLiveMessengerPosition方法根據(jù)liveMessengerContainer元素的尺寸重設(shè)該容器在瀏覽器中的位置。這兩個(gè)方法談不上“技術(shù)”，而更像是一種“經(jīng)驗(yàn)”，它們都是我屬于所收藏的JavaScript代碼，如果大家需要的話也可以保留，或者需要時(shí)再來我的blog查找（其實(shí)我以前也有文章用到過這些方法）。需要注意的是，如果您使用了的是IE瀏覽器，在某些的頁面上可能會需要通過document.documentElement.clientWidth來獲得代碼（clientHeight也一樣），具體原因我正在調(diào)查，大家在使用時(shí)也請注意這點(diǎn)。
哎？那么resetLiveMessengerPosition方法該在什么時(shí)候調(diào)用呢？先不著急，我們再來實(shí)現(xiàn)Web Live Messenger的顯示/隱藏，以及淡入淡出效果——為什么放在一起實(shí)現(xiàn)了？因?yàn)槲覀冇玫搅薺Query框架。請看如下代碼：
<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聯(lián)系我"
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="關(guān)閉" />
</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容器中的內(nèi)容我就不進(jìn)行太多解釋了。同樣略過的還有jQuery的基本使用，不過相信有一定JavaScript基礎(chǔ)的朋友也能比較輕松地看懂。以上JavaScript代碼的第一句隱藏了聊天對話框，接著在jQuery中經(jīng)典的$(document).ready事件中對以有的元素進(jìn)行操作。首先，我們要求在用戶移動了滾動條（scroll），或者改變了瀏覽器大?。╮esize）時(shí)重新設(shè)置容器的位置。需要注意的是，我們接著需要顯式調(diào)用resetLiveMessengerPosition方法來對容器的位置進(jìn)行初始化。然后jQuery開始展現(xiàn)了它的神奇之處，短短幾行代碼即完成了淡入淡出的切換功能，讓人嘆為觀止。
至此，在頁面中嵌入一個(gè)Web Live Messenger的工作就完成了。
