none
生成论坛和网页MSN代码 RRS feed

  • 问题

  •  

    如果生成论坛代码?还有网页代码,让自己的MSN可以让别人浏览网页或者论坛的时候可以看到,并且可以发送消息联系我?请技术人员告诉我怎么生成.极其步骤,谢谢,在次感谢.永远爱MSN.!
    2007年11月7日 16:50

答案

  • 原文地址 http://www.cnblogs.com/JeffreyZhao/archive/2007/11/10/add-web-live-messenger-to-your-page.html

    Live Messenger对话框

      时常在某些朋友的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聊天对话框。这么做的目的只有一个,那就是让用户体验更酷一些。Smile

      现在大家可以试验一下Web Live Messenger的聊天功能了。不过请大家能够访问http://settings.messenger.live.com/applications/CreateHtml.aspx,在页面中和自己的Live Messenger进行聊天。如果您直接在我的blog上测试Web Live Messenger,我实在会忙不过来。Sad

    实现

      实现并不复杂,我总共用了大约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的工作就完成了。欢迎大家提出意见和建议,帮助我改进这个功能。

    2007年11月12日 21:22