⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 popup.html

📁 ajax 聊天室,实现多人聊天,无刷新!
💻 HTML
📖 第 1 页 / 共 2 页
字号:
<html>
<head>
<title></title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/xhconn.js" type="text/javascript"></script>
<script src="js/soundmanager.js" type="text/javascript"></script>

<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/alphacube.css" rel="stylesheet" type="text/css" />
<link href="css/ajax_im.css" rel="stylesheet" type="text/css" />
<link href="css/windows.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
///////////////////////////////////
//         ajax im v3.0          //
//    AJAX Instant Messenger     //
//   Copyright (c) 2006-2007     //
// unwieldy studios/Joshua Gross //
//  http://unwieldy.net/ajaxim/  //
//   Do not remove this notice   //
///////////////////////////////////

document.title = self.opener.newWin;

var IMWin;
var winName;
var defaultTitle = document.title;
var blinkerTimer;
var titlebarBlinker;
var toWin;

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
}

function create() {
   var name='';
   winName = name = self.opener.newWin;
   if(trim(name).length == 0)
      self.close();
   IMWin = document.createElement('div');
   IMWin.className = 'panel';
   IMWin.id = name + '_im';
   IMWin.style.width = '307px';
   IMWin.style.height = '300px';
   IMWin.innerHTML = '<div class="rcvdMessages" id="' + name + '_rcvd"></div>' + "\n" +
                               '<div class="imToolbar" id="' + name + '_toolbar"><img src="images/'+self.opener.windowCSS+'/bold_off.png" onmouseover="self.opener.buttonHover(this);" onmouseout="self.opener.buttonNormal(this);" onclick="toggleBold(\'' + name + '\');" alt="Bold" id="' + name + '_bold" /> ' +
                               '<img src="images/'+self.opener.windowCSS+'/italic_off.png" onmouseover="self.opener.buttonHover(this);" onmouseout="self.opener.buttonNormal(this);" onclick="toggleItalic(\'' + name + '\');" alt="Italic" id="' + name + '_italic" /> '+
                               '<img src="images/'+self.opener.windowCSS+'/underline_off.png" onmouseover="self.opener.buttonHover(this);" onmouseout="self.opener.buttonNormal(this);" onclick="toggleUnderline(\'' + name + '\');" alt="Underline" id="' + name + '_underline" /></div>' +
                               ' <a href="#" class="setFontLink" id="' + name + '_setFont" ' + (isIE ? 'style="height:20px;" ' : '') + 'onclick="toggleFontList(\'' + name + '\');return false;">Tahoma</a>' +
                               ' <a href="#" class="setFontSizeLink" id="' + name + '_setFontSize" ' + (isIE ? 'style="height:20px;" ' : '') + 'onclick="toggleFontSizeList(\'' + name + '\');return false;" onselectstart="return false;">12</a>' +
                               ' <a href="#" class="setFontColorLink" id="' + name + '_setFontColor" ' + (isIE ? 'style="height:20px;" ' : '') + 'onclick="toggleFontColorList(\'' + name + '\');return false;" onselectstart="return false;"><div id="' + name + '_setFontColorColor" style="width:14px;height:14px;display:block;"></div></a>' +
                               ' <a href="#" class="insertEmoticonLink" id="' + name + '_insertEmoticon" ' + (isIE ? 'style="height:20px;" ' : '') + 'onclick="toggleEmoticonList(\'' + name + '\');return false;" onselectstart="return false;"><img src="images/emoticons/mini_smile.gif" width="14" height="14" style="border:0;" /></a>' +
                               "\n" + '<div style="overflow:auto;"><textarea class="inputText" id="'+name+'_sendBox" onfocus="blinkerOn(false);" onkeypress="return keyHandler(event,'+"'"+name+"'"+');"></textarea></div>';
   document.body.appendChild(IMWin);
   
   window.onresize = handleResize;
   
   window.resizeTo(327, 390);
   
   $(name + '_sendBox').style.left = '4px';
   $(name + '_sendBox').style.fontWeight = '400';
   $(name + '_sendBox').style.fontStyle = 'normal';
   $(name + '_sendBox').style.textDecoration = 'none';
   
   $(winName + '_setFontColorColor').style.backgroundColor = '#000000';
   
   handleResize();
   
   $(name + '_rcvd').innerHTML = self.opener.newWinRcvd;
   
   (self.opener.$(winName + '_sendBox').style.fontWeight == '400' ? '' : toggleBold(name));
   (self.opener.$(winName + '_sendBox').style.fontStyle == 'normal' ? '' : toggleItalic(name));
   (self.opener.$(winName + '_sendBox').style.textDecoration == 'none' ? '' : toggleUnderline(name));
   var font = self.opener.$(name + '_sendBox').style.fontFamily.replace(',sans-serif', '');
   if(trim(font).length > 0) setFont(font);

   if(self.opener.isDefined(window.onfocus) && self.opener.isDefined(window.onblur) && self.opener.isDefined(blinkerOn)) {
      window.onfocus = function() { blinkerOn(false); };
      window.onblur = function() { blinkerOn(true); };
   } else {
      document.onfocus = function() { blinkerOn(false); };
      document.onblur = function() { blinkerOn(true); };
   }

   self.opener.newWin = '';
   self.opener.newWinRcvd = '';
}

function handleResize() {
   IMWin.style.height = (browserHeight() - 20) + 'px';
   IMWin.style.width = (browserWidth() - 20) + 'px';

   $(winName + '_rcvd').style.height = (browserHeight() - 103) + 'px';
   $(winName + '_rcvd').style.width = (browserWidth() - 13) + 'px';
   
   $(winName + '_toolbar').style.top = (browserHeight() - 93) + 'px';
   $(winName + '_toolbar').style.width = (browserWidth() - 10) + 'px';  
   
   $(winName + '_setFont').style.top = (browserHeight() - 83) + 'px';
   
   $(winName + '_setFontSize').style.top = (browserHeight() - 83) + 'px';
   
   $(winName + '_setFontColor').style.top = (browserHeight() - 83) + 'px';

   $(winName + '_insertEmoticon').style.top = (browserHeight() - 83) + 'px';
   
   $(winName + '_sendBox').style.top = (browserHeight() - 60) + 'px';
   $(winName + '_sendBox').style.width = (browserWidth() - 16) + 'px';
   
   var curIM = $(winName + '_rcvd');
   curIM.scrollTop = curIM.scrollHeight - curIM.clientHeight + 6;
}

function keyHandler(e, name) {
   var asc = document.all ? event.keyCode : e.which;
   
   if(asc == 13) {
      sendMessage(name);
   }
   return asc != 13;
}

function sendMessage() {
   var xhConn = new XHConn();
   
   var isBold      = ($(winName + '_sendBox').style.fontWeight == '400' ? 'false' : 'true');
   var isItalic    = ($(winName + '_sendBox').style.fontStyle == 'normal' ? 'false' : 'true');
   var isUnderline = ($(winName + '_sendBox').style.textDecoration == 'none' ? 'false' : 'true');
   var fontName    = $(winName + '_setFont').innerHTML;
   var fontName    = $(winName + '_setFont').innerHTML;
   var fontSize    = $(winName + '_setFontSize').innerHTML;
   var fontColor   = $(winName + '_setFontColorColor').style.backgroundColor;

   if(trim($(winName+"_sendBox").value).length > 0) {
      var sBox = $(winName + '_sendBox').value;
      $(winName+"_sendBox").value = '';
      xhConn.connect(self.opener.pingTo, "POST", "call=send&from="+self.opener.user+"&pwd="+self.opener.pass+"&recipient="+winName+"&bold="+isBold+"&italic="+isItalic+"&underline="+isUnderline+"&font="+fontName+"&fontsize="+fontSize+"&fontcolor="+fontColor+"&msg="+encodeURIComponent(sBox.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, "<amp>")),
         function(xh) {
            if(xh.responseText == 'sent') {
               // do nothing!
            } else if(xh.responseText == 'not_online') {
               var rcvdBox = $(winName+"_rcvd");
               rcvdBox.innerHTML = rcvdBox.innerHTML + '<span style="color:#FF0000"><b>Error: Your message could not be sent because the recipient is not logged in.</b></span><br>';
               rcvdBox.scrollTop = rcvdBox.scrollHeight - $(winName+"_im").clientHeight + 6;
            } else if(xh.responseText == 'not_logged_in') {
               logout();
            } else {
               alert('An error occured while sending your message.');
            }
            $(winName+"_sendBox").focus();
         }
      );

      var sentText = sBox;
      sentText = sentText.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/<([^>]+)>/ig, '').replace(/(\s|\n|^)(\w+:\/\/[^\s\n]+)/, '$1<a href="$2" target="_blank">$2</a>');
      sentText = self.opener.emoteReplace(sentText, self.opener.smilies);
      var rcvdBox = $(winName+"_rcvd");
      Stamp = new Date(); var h = String(Stamp.getHours()); var m = String(Stamp.getMinutes()); var s = String(Stamp.getSeconds());
      h = (h.length > 1) ? h : "0"+h; m = (m.length > 1) ? m : "0"+m;
      if(sentText.replace(/<([^>]+)>/ig, '').indexOf('/me') == 0)
         rcvdBox.innerHTML = rcvdBox.innerHTML + "<b class=\"userA\">[" + h + ":" + m + "] <i>" + self.opener.user + ' ' + sentText.replace(/<([^>]+)>/ig, '').replace(/\/me/, '') + "</i></b><br>\n";
      else
         rcvdBox.innerHTML = rcvdBox.innerHTML + "<b class=\"userA\">[" + h + ":" + m + "] " + self.opener.user + ":</b> <span style=\"font-family:" + fontName + ",sans-serif;font-size:" + fontSize + "px;color:" + fontColor + ";\">" + (isBold == 'true' ? "<b>" : "") + (isItalic == 'true' ? "<i>" : "") + (isUnderline == 'true' ? "<u>" : "") + sentText + (isBold == 'true' ? "</b>" : "") + (isItalic == 'true' ? "</i>" : "") + (isUnderline == 'true' ? "</u>" : "") + "</span><br>\n";
      rcvdBox.scrollTop = rcvdBox.scrollHeight - rcvdBox.clientHeight;
      if(self.opener.audioNotify == true) self.opener.soundManager.play('msg_out', 1, true);
   }
}

function trim(text) {
   if(text == null) return null;
   return text.replace(/^[ \t]+|[ \t]+$/g, "");
}

function toggleBold(name) {
   $(name + '_sendBox').style.display = 'none'; // horrah weird Opera 9 input refresh!
   if($(name + '_sendBox').style.fontWeight == '400') {
      $(name + '_bold').src = 'images/' + self.opener.windowCSS + '/bold_on.png';
      $(name + '_sendBox').style.fontWeight = '700';
   } else {
      $(name + '_sendBox').style.fontWeight = '400';
      $(name + '_bold').src = 'images/' + self.opener.windowCSS + '/bold_off.png';
   }
   $(name + '_sendBox').style.display = 'block'; // horrah weird Opera 9 input refresh!
   $(name + '_sendBox').focus();
}
   
function toggleItalic(name) {
   $(name + '_sendBox').style.display = 'none'; // horrah weird Opera 9 input refresh!
   if($(name + '_sendBox').style.fontStyle == 'normal') {
      $(name + '_sendBox').style.fontStyle = 'italic';
      $(name + '_italic').src = 'images/' + self.opener.windowCSS + '/italic_on.png';
   } else {
      $(name + '_sendBox').style.fontStyle = 'normal';
      $(name + '_italic').src = 'images/' + self.opener.windowCSS + '/italic_off.png';
   }
   $(name + '_sendBox').style.display = 'block'; // horrah weird Opera 9 input refresh!
   $(name + '_sendBox').focus();
} 

function toggleUnderline(name) {
   $(name + '_sendBox').style.display = 'none'; // horrah weird Opera 9 input refresh!
   if($(name + '_sendBox').style.textDecoration == 'none') {
      $(name + '_sendBox').style.textDecoration = 'underline';
      $(name + '_underline').src = 'images/' + self.opener.windowCSS + '/underline_on.png';
   } else {
      $(name + '_sendBox').style.textDecoration = 'none';
      $(name + '_underline').src = 'images/' + self.opener.windowCSS + '/underline_off.png';
   }
   $(name + '_sendBox').style.display = 'block'; // horrah weird Opera 9 input refresh!
   $(name + '_sendBox').focus();
}

function toggleFontList(win) {
   $('emoticonList').style.display = 'none';
   $('fontSizeList').style.display = 'none';

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -