在網頁裡添加Web Live Messenger對話框

Live Messenger對話框

　　時常在某些朋友的blog中看到一個可供聊天的對話框，它能讓正在浏覽這個站點的使用者進行聊天。不過在我看來，這個功能形同雞肋——誰會知道哪些人正在浏覽，又有哪些人可以聊天呢？不過今天在浏覽LoveCherry的blog時發現在左側邊欄裡出現了一個可供聊天的Live Messenger對話框，頓時讓我産生了興趣。不過知道這個東東的人似乎還不多，是以隻能動用搜尋引擎了（在這裡想再說一句多餘的話，因為我時常會收到一些類似于“ASP.NET AJAX架構哪裡可以下載下傳”之類的問題，是以我建議那些朋友一定要養成先搜再問的習慣）。那麼我們就先來看看這個東西具體是什麼樣的吧。

　　首先，我們可以通路這個頁面（[url]http://settings.messenger.live.com/applications/CreateHtml.aspx[/url]），從中可以看出微軟提供了兩種方式供使用者使用Live Messenger的Web聊天功能。

• 提供一個連結（），點選它則會彈出一個頁面可供聊天——于是别人就可以通過這個頁面與您聯系了。值得一提的是，圖示也會根據使用者當時的狀态不同而改變。
• 提供了一段代碼，在頁面上直接放入一塊較小的區域顯示聊天頁面。很顯然，這是一個iframe。

　　在進行了簡單的試驗（使用Web Live Messenger和自己的Live Messenger聊天）之後，發現這個小玩意兒的功能還是比較可圈可點的。

• 可以選擇是否允許匿名使用者使用Web Live Messenger（[url]http://settings.messenger.live.com/applications/WebSettings.aspx[/url]）。
• 性能很不錯，基本上沒有明顯延遲，當然這可能和使用者本身的網絡條件有關。
• 聊天的體驗比想象中高很多，我們可以在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的聊天功能了。不過請大家能夠通路[url]http://settings.messenger.live.com/applications/CreateHtml.aspx[/url]，在頁面中和自己的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

                document.documentElement.clientWidth);

                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-p_w_picpath: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>

        </tr>

    </table>

<div>

    $("#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(){

    });

　　liveMessengerContainer容器中的内容我就不進行太多解釋了。同樣略過的還有jQuery的基本使用，不過相信有一定JavaScript基礎的朋友也能比較輕松地看懂。以上JavaScript代碼的第一句隐藏了聊天對話框，接着在jQuery中經典的$(document).ready事件中對以有的元素進行操作。首先，我們要求在使用者移動了滾動條（scroll），或者改變了浏覽器大小（resize）時重新設定容器的位置。需要注意的是，我們接着需要顯式調用resetLiveMessengerPosition方法來對容器的位置進行初始化。然後jQuery開始展現了它的神奇之處，短短幾行代碼即完成了淡入淡出的切換功能，讓人歎為觀止。

　　至此，在頁面中嵌入一個Web Live Messenger的工作就完成了。歡迎大家提出意見和建議，幫助我改進這個功能。