webIm中js总结

        最近做一个项目，需要实现web端的im聊天功能。考虑到执行效率不能用extjs，最后决定采用jquery+div+css(没办法只有重新发明轮子了^_^)。个人一直比较反感js，感觉这门语言对开发人员太不人性化，尤其在调试、兼容性等问题，简直是场灾难(呵呵，工作之余发下牢骚)。项目进行到现在，一般功能实现也差不多了，回过头来对当初一些问题做个总结，留个名便于以后查询。该代码在ie6、ie7、firefox上测试通过。

一、html编辑器。
1.表情符插入:
        对于这个功能在使用者看来实现是理所当然的事，但要自己实现却有2个难度：一是html textarea控件中并不支持html代码，即在textarea中使用<img src='...'>标签不会显示图片；二是在信息输入框输入文字的同时要支持表情符的任意插入，即在光标处插入表情。在网上查了很多资料，参考了extjs htmleditor源码，使用iframe方式总算把这问题搞定，以下是主要实现代码：

初始化htmleditor实现:

 1  /* 初始化htmleditor */
 2  function  initInputHtmleditor(){
 3       var  iframeSrc  =  $.browser.msie ?   " javascript:false; "  :  " javascript:; " ;
 4       var  msgIndiv  =  ' < IFRAME name = " messageSend "  id = " messageSend "  frameBorder = " 0 "  src = " '+iframeSrc+' " ></ IFRAME > ';
 5      $('#msgInputDiv').html(msgIndiv); // 把iframe加入到页面显示div中
 6      
 7       /* 通过div id获取iframe的document对象 */
 8       var  doc  =  getIframeDoc('messageSend');
 9      doc.open();
10      doc.write(getDocMarkup());
11      doc.close();
12      
13      $(doc).ready( function (){
14          doc.designMode = " on " ;
15           // doc.contentEditable = true;
16      });
17      
18       /* 加载键盘触发事件 */
19      $(doc).bind('keypress', function (event){ // 添加处理事件
20          addSendMsg(event);
21      });
22  }
23 
24  /* 获取iframe document对象 */
25  function  getIframeDoc(iframeId){
26       var  iframeObj  =  $('#' + iframeId);
27       var  wnd  =  getIframeWnd(iframeId);
28       var  doc  =  $.browser.msie  ?  wnd.document : (iframeObj.contentDocument  ||  wnd.document);
29       return  doc;
30  }
31 
32  /* 获取iframe document window 对象 */
33  function  getIframeWnd(iframeId){
34       return  $.browser.msie  ?  document.frames(iframeId) : window.frames[iframeId];
35  }
36 
37  /*
38   * 返回html document标志字符串
39  该方法中p元素的css margin和padding属性一定要设为0,否则ie下处理回车事件时行距会很大，因为ie在iframe下对回车是按<p></p>处理的 */
40  function  getDocMarkup(){
41       return  ' < html >< head >< style type = " text/css " > '  +
42              'body{border: 0 ;margin:0px;padding:0px;height: 98 % ;cursor:text;'  +
43              'word - break : break - all;}'  + // 字体自动换行
44              'p{margin:0px;padding:0px;}'  +
45             ' </ style ></ head >< body ></ body ></ html > ';
46  }

插入表情代码:

 1  /*
 2   * 在文档光标处插入文本
 3   * 插入示例:
 4   * var img = "<img src='"+basePath+"face/01.gif' ></img>";
 5   * var doc = getIframeDoc('messageSend');//取iframe document对象
 6   * insertAtCursor(doc,img,'messageSend');
 7   *  */
 8  function  insertAtCursor(doc,value,focusElId){
 9       if ($.browser.msie){ // ie
10           var  wnd  =  getIframeWnd(focusElId); // 聚焦元素id
11          wnd.focus();
12           var  r  =  doc.selection.createRange();
13           if (r){
14              r.collapse( true );
15              r.pasteHTML(value);
16          }
17      } else   if ($.browser.mozilla  ||  $.browser.opera){ // firefox ,opera
18           var  wnd  =  getIframeWnd(focusElId); // 聚焦元素id
19          wnd.focus();
20          doc.execCommand( " InsertHTML " ,  false , value  ===  undefined  ?   null  : value);
21      } else   if ($.browser.safari){ // safari
22          doc.execCommand( " InsertText " ,  false , value  ===  undefined  ?   null  : value);
23      }
24  }

2. 发送消息Ctrl+enter事件捕获

 1  // 键盘按起之后的响应事件，可能为回车，可能为删除，可能为正常输入
 2  function  addSendMsg(e)
 3  {
 4       var  evt  =  window.event  ?  window.event : e;
 5       var  isSend  = false // 是否出发Ctrl+enter键
 6       if ($.browser.msie){
 7          isSend  =  evt.keyCode == 10 ;
 8      } else {
 9          isSend  =  evt.ctrlKey  &&  evt.keyCode == 13 ;
10      }
11       if (isSend) // ctrl+回车键
12      {
13           var  msg  =  getInputMessage();
14           if (msg  ==  ''  ||  msg  ==  ' < br > '){
15              alert( " 对不起，您不能发送空消息！！！ " );
16              setInputMsgFocus();
17               return ;
18          }
19           /* 发送消息 */
20          sendChatMsg(msg);
21      }
22  }

---------------------
月下孤城
mail:eagle.daiqiang@gmail.com