在网页里添加Web Live Messenger对话框

　　时常在某些朋友的blog中看到一个可供聊天的对话框，它能让正在浏览这个站点的用户进行聊天。不过在我看来，这个功能形同鸡肋——谁会知道哪些人正在浏览，又有哪些人可以聊天呢？不过今天在浏览 LoveCherry的blog时发现在左侧边栏里出现了一个可供聊天的Live Messenger对话框，顿时让我产生了兴趣。不过知道这个东东的人似乎还不多，因此只能动用搜索引擎了（在这里想再说一句多余的话，因为我时常会收到一些类似于“ASP.NET AJAX框架哪里可以下载”之类的问题，所以我建议那些朋友一定要养成先搜再问的习惯）。那么我们就先来看看这个东西具体是什么样的吧。

　　首先，我们可以访问这个页面（ [url]http://settings.messenger.live.com/applications/CreateHtml.aspx[/url]），从中可以看出微软提供了两种方式供用户使用Live Messenger的Web聊天功能。

　　在进行了简单的试验（使用Web Live Messenger和自己的Live Messenger聊天）之后，发现这个小玩意儿的功能还是比较可圈可点的。

　　试验了之后，我决定将其放在我的blog中，不过到底该怎么放呢？

　　现在访问 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
        {
            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），或者改变了浏览器大小（resize）时重新设置容器的位置。需要注意的是，我们接着需要显式调用resetLiveMessengerPosition方法来对容器的位置进行初始化。然后jQuery开始展现了它的神奇之处，短短几行代码即完成了淡入淡出的切换功能，让人叹为观止。

　　至此，在页面中嵌入一个Web Live Messenger的工作就完成了。欢迎大家提出意见和建议，帮助我改进这个功能。

本文转自 jeffz 51CTO博客，原文链接：http://blog.51cto.com/jeffz/59708，如需转载请自行联系原作者