Add web Live Messenger dialog box on the webpage)

From: http://www.cnblogs.com/JeffreyZhao/archive/2007/11/10/add-web-live-messenger-to-your-page.html

Live Messenger dialog box

A chat dialog box is often displayed in the blog of some friends, which allows users who are browsing the site to chat. But in my opinion, this function is just like a chicken-who knows who is browsing and who can chat? However, when I browsed lovecherry's blog today, a Live Messenger dialog box was displayed on the left side of the bar for chatting, which immediately aroused my interest. However, there seem to be a few people who know this stuff, so they can only use the search engine (here I want to say something redundant, because I often receive something similar to "ASP. net Ajax framework where to download "and other issues, so I suggest those friends must develop the habit of searching and asking again first ). Let's take a look at the specific content of this item.

First, we can access this page (http://settings.messenger.live.com/applications/CreateHtml.aspx), it can be seen that Microsoft provides two ways for users to use Live Messenger Web chat function.

• Provide a link () and click it to bring up a page for chatting-so others can contact you through this page. It is worth mentioning that the icon will also change according to the user's current status.
• A piece of code is provided to directly display the chat page in a small area on the page. Obviously, this is an IFRAME.

After a simple experiment (using web Live Messenger to chat with your own Live Messenger), we found that the functionality of this little gadget is still quite commendable.

• You can choose whether anonymous users are allowed to use web Live Messenger (http://settings.messenger.live.com/applications/WebSettings.aspx ).
• The performance is very good and there is basically no significant latency. Of course, this may be related to the user's network conditions.
• The chat experience is much higher than expected. We can find on the Web Live Messenger interface that "the most recent message was received on xxxx-xx-xx: XX: xx "and" XXXX is entering a message. In addition, the special fonts and emojis used in our chat can be correctly displayed.
• I tried to find the other party's IM account through web Live Messenger, but it seems to be very protective of this, which means that if the user places web Live Messenger on the blog, this prevents spam attacks due to the leakage of email addresses.

After the experiment, I decided to put it in my blog, But how should I put it?

Live Demo

Now, when you access lovecherry's blog, you will find that he has removed web Live Messenger from the sidebar. The Sidebar is too narrow. If you use a slightly longer Nick, it will be very high, and the user experience is poor because there are too few lines of text that can be displayed. Finally, I used "traditional" Web embedded chat dialog box practices. If you are browsing my blog, you will find a rectangular Windows Live Messenger image in the lower right corner of the page, click it to display a 300*400 Web Live Messenger Chat dialog box. If you think this dialog box is blocked, you can click the close button in the upper-left corner of the dialog box, so that only the rectangular image in the lower-right corner is left on the page. At the same time, I chose the fade-in and fade-out effect to display/hide the Web Live Messenger Chat dialog box. There is only one purpose to do this, that is, to make the user experience cooler. :)

Now you can test the chat function of Web Live Messenger. However, please visit http://settings.messenger.live.com/applications/createhtml.aspxto chat with your Live Messenger on the page. If you test web Live Messenger directly on my blog, I will be too busy. :(

Implementation

The implementation is not complex. I spent about two hours in total, including learning some jquery functions. Alas, I didn't expect to use this JavaScript framework for the first time until now. I have to say that if you are looking for a javascript framework that is convenient for developing front-end applications and you want it to be small enough, jquery is probably what you need. What is not commensurate with its powerful features is the mini size. A obfuscated jquery script file that has not yet been compressed by Gzip is only 26kb in size, but it brings you convenience and can help you save a lot of work.

Let's start now. First, we need to make the chat dialog box of Web Live Messenger always display within the visible range of the page. To implement this function, the key lies in the calculation of the element size in the page. See the following code:

<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 = windows. innerwidth;
Clientheight = windows. innerheight;
}
Else if ($. browser. Opera)
{
Clientwidth = math. Min (Windows. innerwidth,
Document. Body. clientwidth );
Clientheight = math. Min (Windows. innerheight,
Document. Body. clientheight );
}
Else
{
Clientwidth = math. Min (Windows. innerwidth,
Document.doc umentelement. clientwidth );
Clientheight = math. Min (Windows. innerheight,
Document.doc umentelement. clientheight );
}

Return {width: clientwidth, height: clientheight };
}

Function resetlivemessgerposition ()
{
VaR clientbounds = getclientbounds ();
VaR Container = Document. getelementbyidx ("livemessengercontainer ");

VaR scrollleft = (document.doc umentelement. scrollleft?
Document.doc umentelement. scrollleft: Document. Body. scrollleft );
VaR scrolltop = (document.doc umentelement. scrolltop?
Document.doc umentelement. 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>

The preceding getclientbounds method determines the browser type to obtain the precise size of the display area of the page. The resetlivemessential gerposition method resets the position of the container in the browser based on the livemessential gercontainer element. These two methods are not "technical", but more like an "Experience". They are all my JavaScript code, which can be retained if needed, or, if necessary, search for my blog (in fact, I have used these methods in my previous articles ). If you use an Internet browser, you can access document.doc umentelement. clientwidth on some pages to obtain the Code (the same is true for clientheight). I am investigating the specific cause. Please pay attention to this when using it.

Ah? So when should I call the resetlivemessengerposition method? Don't worry, let's implement the Web Live Messenger display/hide, and fade-in and fade-out effect-why is it implemented together? Because we use the jquery framework. See the following code:

<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">
Alt = "contact me with Live Messenger"
Style = "margin: 10px 10px 0px 9px;"/>
</Div>
<Table border = "0" cellpadding = "0" cellspacing = "0"
Id = "livemessengerpanel">
<Tr>
<TD valign = "TOP">
Style = "cursor: pointer; margin-Right: 3px ;"
Src = "messenger_close_sm.gif" alt = "close"/>
</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 (resetlivemessential gerposition );
$ (Window). Resize (resetlivemessential gerposition );

Resetlivemessgerposition ();

$ ("# Livemessengerthumb"). Click (function (){
$ ("# Livemessengerthumb"). fadeout (500, function (){
$ ("# Livemessengerpanel"). fadein (500, function (){
Resetlivemessgerposition ();
});
Resetlivemessgerposition ();
});
});

$ ("# Hidelivemessengerpanel"). Click (function (){
$ ("# Livemessengerpanel"). fadeout (500, function (){
$ ("# Livemessengerthumb"). fadein (500, function (){
Resetlivemessgerposition ();
});
Resetlivemessgerposition ();
});
});
});
<SCRIPT>

I will not explain much about the content in the livemessengercontainer container. The basic use of jquery is also skipped, but I believe that friends with certain JavaScript basics can easily understand it. The first sentence of the above JavaScript code hides the chat dialog box, and then operates on some elements in the classic $ (document). Ready event in jquery. First, we need to reset the container location when the user moves the scroll bar (scroll) or changes the browser size (resize. Note that we need to call the resetlivemessential gerposition method explicitly to initialize the container location. Then jquery began to show its magic. Just a few lines of code completed the fade-in and fade-out switching function, which was amazing.

So far, the work of embedding a web Live Messenger in the page is complete. You are welcome to provide comments and suggestions to help me improve this function.

# Html/XHTML/XML Column