聊天应用Scrollable div或iframe

Question

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

Answer 1

您可以创建一个脚本，将聊天嵌入第三方网站，同时创建<div>或<iframe>

主要的有趣差异

• 的 iframe
  • 代码：所有用户事件（点击次数，关键事件，悬停等）都可以通过外部聊天应用页面进行处理。如果没有复杂的API，用户将无法轻松修改或定位所需的事件以满足他们的需求（毕竟他们为什么要这样做）。敏感的后端代码和逻辑可以隐藏在你身边。
  • 样式：您的聊天应用 看起来与您定义的完全相同。使用扩展API，用户只能选择一些预定义样式。 （我个人很讨厌。）所以为你编写更多代码。
  • 使用免费聊天应用程序主要使用它们强制应用程序按照他们希望的方式使用，防止自定义样式并可能删除App徽标，链接到来自网站或一些随机广告。如果您想提供数据存储，或者提供无声应用程序更新，也可以使用。
  • 滚动，高度不知道周围的项目，这些项目大部分都有API，用户可以选择一些预定义的聊天高度。

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

所以，即使我亲自选择<div>，也完全符合您的需求。

关于可滚动性，我创建了一个不错的UI技术：

• 创建一个变量标志，如果可滚动区域悬停，将注册
• 在服务器上ping新邮件之后，运行一个将该区域滚动到底部的函数
• 如果可滚动区域悬停意味着用户正在阅读旧聊天
• on mouseleave =自动滚动聊天到底部（最后一次会话）

<强> See it in action here

<强> 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);

Answer 2

我自己总是会为聊天应用程序找一个div，为什么？

这是基本的好处。您可以处理div上的事件，使用iframe无法处理。您可以亲自尝试，尝试处理iframe中的click，mouseover事件，您将无法获得任何结果。

$('div').click(function () {
  alert('Div was clicked!');
}

虽然iframe不允许您访问子元素的事件。

虽然div会向父级或甚至js提供每个事件，以便根据需要处理和编码。对于iframe，你需要处理iframe中的事件，比如说iframe加载的页面，它的事件都在用于创建iframe的代码中。

$('iframe').click(function () {
   // code..this will execute when click is on iframe, not for a child
}

但你不能做某事

$('iframe html body div').click(function () {
   /* techniques for iframes are different and harder as
    * compared to ones used for div, to get a child event
    */
})

但div中的元素可以嵌入到您的网页中。您可以随时更改其子元素或父元素。因此，如果您可以处理所有元素事件，聊天应用程序会更好。

<div>
  Some text
</div>

的jQuery

$('div').on('event', function () { // on an event..
  // so on, adding more and more event handlers and blah blah
})

在div中，您可以使用ajax请求更新内容，然后将其添加到div中，您还可以使用jQuery API滚动它。无论页面大小多少，您都可以使用%或确切位置滚动到的位置。所以div更简单。

$('div').load('chat_page.php'); // load a page in the div

或者只是使用

更新它

$.ajax({ // create ajax request
  url: 'chat_message', // url 
  success: function (resp) { // if OK
    $('div').html(resp); // update the page
  }
});

iframe通常用于让其他人使用您的功能，例如在第三方网站中嵌入聊天应用程序，您无需在其中编辑或重复使用代码。所以你给他们一个iframe和一个链接。

我不理解骂人的事！ :(对不起，我想我会写出模糊的答案，所以我会让那部分去，但这是你可以滚动元素

$('div').scrollTo(10); // scroll 10px down..

（你在评论中要求浏览器支持）但是，jQuery支持跨浏览器和跨平台。剩下的部分是HTML，它随处可见！

http://jquery.com/browser-support/以下是了解浏览器支持的链接

Answer 3

我更喜欢使用div，因为您可以轻松管理它的所有内容，并且使用较少的数据下载服务器更容易刷新。只是个人意见。

PROS或DIV包含较少的数据，随时随地插入，以及在页面上需要时轻松将数据用于其他任务的能力。

IFRAME的优点更易于设置和编码，并且更容易使其独立。

iframe的缺点，并且更难以访问其中的数据并且需要更多代码来执行此操作（如果需要）并且div的缺点是使得所有css和代码正确且就地为div及其父项及其子项以使其流动正确而且很好。