聊天应用Scrollable div或iframe

Question

使用iframe或可滚动div可以使聊天窗口可滚动的建议方法是什么？这两种技术的优点和缺点是什么？您会选择哪个以及为什么？谢谢

Answer 1

您可以创建一个脚本,将聊天嵌入到创建两者<div>或的第三方网站 <iframe>

主要的有趣差异

• iframe
  • 代码:所有用户事件(点击次数,关键事件,悬停等)均可从您的外部聊天应用页面独家处理.如果没有复杂的API,用户将无法轻松修改或定位所需的事件以满足他们的需求(毕竟他们为什么要这样做).敏感的后端代码和逻辑可以隐藏在您的身边.
  • 样式:您的聊天应用程序 看起来与您定义的完全一样.使用扩展API,用户只能选择一些预定义的样式.(我个人很讨厌.)所以为你编写更多代码.
  • 用途主要用于通过免费聊天应用程序,他们迫使应用只是他们希望它成为的方式,防止自定义样式,并可能去除应用程序标识,链接到的网站,或一些随机的广告.如果您想提供数据存储,或者提供静默应用程序更新,也可以使用它.
  • 滚动和高度不知道周围的项目,其结束主要是具有API,用户选择一些预定义的聊天高度.

• DIV
  • 代码:所有用户事件(点击次数,关键事件,悬停等)都可以轻松访问并可供程序员修改.您仍然可以使用一个很好的插件/ API来简化用户的自定义.
  • 样式:在用户页面内呈现的DIV将继承该页面样式.很大一部分认为聊天应用程序将有适合完美的页面设计的设计.困难的是,在你的CSS中你可能必须防止一些聊天敏感的样式被主页样式覆盖.小心.
  • 用途:人们会喜欢它.如果您希望用户保留您的链接或徽标,您可以要求他们保留版权或链接.你不能指望这会发生.如果你出售你的应用程序,或者你只是不在乎,我发现它使用正确的.
  • 聊天元素的滚动和高度可以识别周围的文档.这里我的建议是建立一个流体聊天应用程序使用%.这样你的应用程序将适合每个容器,如果它是一个流动的页面...更多的爱你.

因此,即使我亲自选择<div>一个,也完全取决于您的需求.

关于可滚动性,我创建了一个很好的UI技术:

• 创建一个变量标志,如果可滚动区域悬停,将会注册
• 在ping服务器以获取新消息后,运行一个将该区域滚动到底部的函数
• 如果可滚动区域悬停意味着用户正在阅读旧聊天
• on mouseleave =自动滚动聊天到底部(最后一次对话)

在这里看到它

HTML:

   <div class="chat">
    <div class="messages">
      <div>Old message</div>
    </div>
    <textarea></textarea>
    <button>Post</button>
  </div>

BASIC CSS(演示链接中的CSS更多):

.chat{
  position:relative;
  margin:0 auto;
  width:300px;
  overflow:hidden;
}
.chat .messages{
  width:100%;
  height:300px;
  overflow:hidden;
}
.chat .messages:hover{
  overflow-y:scroll;
}
.chat .messages > div{
  padding:15px;
  border-bottom:1px dashed #999;
}

jQuery:

var $chat     = $('.chat'),
    $printer  = $('.messages', $chat),
    $textArea = $('textarea', $chat),
    $postBtn  = $('button', $chat),
    printerH  = $printer.innerHeight(),
    preventNewScroll = false;

//// SCROLL BOTTOM  
function scrollBottom(){
  if(!preventNewScroll){ // if mouse is not over printer
    $printer.stop().animate( {scrollTop: $printer[0].scrollHeight - printerH  }, 600); // SET SCROLLER TO BOTTOM
  }
}   
scrollBottom(); // DO IMMEDIATELY

function postMessage(e){  
  // on Post click or 'enter' but allow new lines using shift+enter
  if(e.type=='click' || (e.which==13 && !e.shiftKey)){ 
    e.preventDefault();
    var msg = $textArea.val(); // not empty / space
    if($.trim(msg)){
      $printer.append('<div>'+ msg.replace(/\n/g,'<br>') +'</div>');
      $textArea[0].value=''; // CLEAR TEXTAREA
      scrollBottom(); // DO ON POST
      // HERE Use AJAX to post msg to PHP      
    } 
  }
}


//// PREVENT SCROLL TO BOTTOM WHILE READING OLD MESSAGES
$printer.hover(function( e ) {
  preventNewScroll = e.type=='mouseenter' ? true : false ;
  if(!preventNewScroll){ scrollBottom(); } // On mouseleave go to bottom
});

$postBtn.click(postMessage);
$textArea.keyup(postMessage);

//// TEST ONLY - SIMULATE NEW MESSAGES
var i = 0;
intv = setInterval(function(){
    $printer.append("<div>Message ... "+ (++i) +"</div>");
    scrollBottom(); // DO ON NEW MESSAGE (AJAX)
},2000);