聊天应用Scrollable div或iframe
使用iframe或可滚动div可以使聊天窗口可滚动的建议方法是什么？ 这两种技术的优缺点是什么？ 您会选择哪个以及为什么？ 谢谢
您可以创建一个脚本，将聊天嵌入到创建
或的第三方网站中
主要的有趣差异
-
iframe- 代码 ：所有用户事件（点击次数，关键事件，hover等）都可以从您的外部聊天应用页面独家处理。 如果没有复杂的API，用户将无法轻松修改或定位所需的事件以满足他们的需求（毕竟他们为什么要这样做）。 敏感的后端代码和逻辑可以隐藏在您的身边。
- 样式 ：您的聊天应用程序 看起来与您定义的完全一样 。 使用扩展API，用户只能选择一些预定义的样式 。 （我个人很讨厌。）所以为你编写更多代码。
- 用途主要由免费聊天应用程序使用，它们强制应用程序按照他们希望的方式，防止自定义样式，可能删除应用程序徽标，链接到站点或一些随机广告。 如果您想提供数据存储，或者提供静默应用程序更新 ，也可以使用它 。
- 滚动和高度不知道周围的项目，其结束主要是API，用户选择一些预定义的聊天高度。
-
DIV- 代码 ：所有用户事件（点击次数，关键事件，hover等）都可以轻松访问并可供程序员修改。 您仍然可以使用一个很好的插件/ API来简化用户的自定义。
- 样式 ：在用户页面内呈现的DIV将inheritance该页面样式。 聊天应用程序的设计非常适合页面设计。 困难的是，在你的CSS中，你可能必须防止一些聊天敏感的样式被主机页面样式覆盖。 小心。
- 用途：人们会喜欢它。 如果您希望用户保留您的链接或徽标，您可以要求他们保留版权或链接。 你不能指望这会发生。 如果你出售你的应用程序，或者你只是不在乎，我发现它使用正确的。
- 聊天元素的滚动和高度可以识别周围的文档。 我的建议是使用
%创建一个流畅的聊天应用程序 。 这样你的应用程序将适合每个容器，如果它是一个流动的页面…更多的爱你。
因此，即使我亲自选择
，也完全取决于您的需求。
关于可滚动性，我创建了一个很好的UI技术：
- 创建一个变量标志，如果可滚动区域hover，将会注册
- 在ping服务器以获取新消息后，运行一个将该区域滚动到底部的函数
- 如果可滚动区域hover意味着用户正在阅读旧聊天
- on mouseleave =自动滚动聊天到最后（最后一次对话）
在这里看到它
HTML ：
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(''+ msg.replace(/\n/g,'
') +''); $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("Message ... "+ (++i) +""); scrollBottom(); // DO ON NEW MESSAGE (AJAX) },2000);
我自己总是会去聊天应用程序的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中的元素可以嵌入到您的网页中。 您可以随时更改其子元素或父元素。 如果你能处理所有的元素事件，聊天应用会更好。
Some text
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通常用于让其他人使用您的function，例如在第三方网站中嵌入聊天应用程序，您无需在其中编辑或重复使用代码。 所以你给他们一个iframe和一个链接。
我不理解骂人的事！ :(对不起，我想我会写那个模糊的答案，所以我会让那部分去，但这是你如何滚动元素
$('div').scrollTo(10); // scroll 10px down..
（您在评论中要求浏览器支持）但是，jQuery支持跨浏览器和跨平台。 剩下的部分是HTML，它随处可见！
我更喜欢使用div，因为您可以轻松管理它的所有内容，并且更容易刷新，使用较少的数据下载服务器。 只是个人意见。
PROS或DIV包含较少的数据，随时随地插入，以及在页面上需要时轻松将数据用于其他任务的能力。
IFRAME的优点更易于设置和编码，更容易使其独立。
缺点是iframe并且更难以访问其中的数据并且需要更多代码来执行此操作（如果需要）和div的缺点是使得所有css和代码正确且就地为div及其父项及其子项正确且正确地流动。