聊天应用可滚动div或iframe [英] Chat app Scrollable div or Iframe
本文介绍了聊天应用可滚动div或iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用iframe或可滚动div，使聊天窗口可滚动的建议方法是什么？这两种技术的利弊是什么？你会选择哪个？为什么？
感谢
解决方案
您可以创建一个脚本，将聊天内嵌到第三方网站， c $ c>< div> 或< iframe>
有趣的差异
-
iframe
- 代码：所有用户活动（点击，重要事件，悬停等）都可以从您的外部聊天应用页面处理。没有复杂的API，用户将无法轻松地修改或定位所需的事件，以适应他们的需要（为什么他们毕竟）。敏感的后端代码和逻辑可以保持隐藏在您的身边。
- 样式：您的聊天应用您已定义。使用扩展API，用户只能选择一些预定义样式。 使用主要用于免费聊天应用程序，他们强制应用程序只是他们想要的方式它是，阻止自定义样式，可能删除应用徽标，链接到从网站或一些随机广告。如果您想要提供数据存储，或者提供无声的应用程序更新，也可以使用此选项。
- 滚动
-
DIV
- 代码：所有用户事件（点击次数，关键事件，悬停等）可轻松访问，并可修改程序员。
- 样式：显示在用户界面中的DIV用户页面将继承该页面样式。
好的部分是聊天应用将有一个适合完美的页面设计的设计。
难的部分是，在 CSS 中，您必须防止某些聊天敏感样式被主机页面样式覆盖。小心。 - 使用：人们会喜欢它。如果您希望用户保留您的链接或徽标，您可以要求他们保留版权或链接。你不能指望这会发生。
- 滚动和高度聊天 / em>元素知道周围的文档。我的建议是使用
％创建流动聊天应用。
$ b
所以即使我个人选择< div> ，这完全取决于你的需要。
关于可滚动性，我创建了一个不错的UI技术：
- 创建一个变量标记，它将注册是否可滚动区域被悬停
- 在服务器ping新消息后，运行一个函数将滚动区域到底部
- 如果可滚动区域被悬浮意味着用户正在阅读旧聊天
- 在mouseleave =自动滚动到底部
< div class =chat>
< div class =messages>
< div>旧讯息< / div>
< / div>
< textarea>< / textarea>
< button>帖子< / 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 dotted＃999;
}
jQuery ：
var $ chat = $（'。chat'），
$ printer = $（'。messages'，$ chat），
$ textArea = $（'textarea'，$ chat），
$ postBtn = $（'button'，$ chat），
printerH = $ printer.innerHeight（），
preventNewScroll =假;
//// SCROLL BOTTOM
function scrollBottom（）{
if（！preventNewScroll）{//如果鼠标不在打印机上
$ 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（/ \\\
/ g，'< br>'）+'< / div>'）;
$ textArea [0] .value =''; // CLEAR TEXTAREA
scrollBottom（）; // DO ON POST
// here使用AJAX将msg发布到PHP
}
}
}
////在读取旧邮件时，防止滚动到下面
$ printer.hover（function（e）{
preventNewScroll = e.type =='mouseenter'？true：false;
if（！preventNewScroll） {scrollBottom（）;} //在mouseleave转到底部
}）;
$ postBtn.click（postMessage）;
$ textArea.keyup（postMessage）;
////仅测试 - 模拟新信息
var i = 0;
intv = setInterval（function（）{
$ printer.append（< div> Message ...+（++ i）+< / div>）;
scrollBottom（）; // DO ON NEW MESSAGE（AJAX）
}，2000）;
What is the advised method to make a chat window scrollable, using an iframe or a scrollable div? What are the pros&cons of the two techniques? Which would you opt for and why? Thanks
解决方案
You can create a script that will embed a chat into a third-party website creating both <div> or <iframe>
The main interesting differences
iframe- Code: All user events (clicks, key events, hovers etc) are handlable exclusively from your external chat app page. Without a complicated API the user will not be able to easily modify or target desired events to suit their needs (Why should they after all). The sensitive backend code and logic can stay hidden on your side.
- Styling: Your chat app will look exactly like you defined it. With an extended API the user will only be able to select some predefined styles. (I personally hate that.) So more coding for you.
- Uses Mostly used by free chat apps where they force the app to be just the way they want it to be, preventing custom styles and possibly the removal of the App logo, link to the from site, or some random ads. Also used if you want to provide the data storage on your side, or provide silent application updates.
- Scroll and heights are unaware of the surrounding items which ends mostly having an API where the user chooses some predefined chat heights.
DIV- Code: All user events (clicks, key events, hovers etc) are easily accessible and modifiable to the programmer. You can still have a nice plugin / API that will simplify customizations to the user.
- Styling: The DIVs being rendered inside the user page will inherit that page styles. The good part it that the chat app will have a design that suits perfectly the page design. The hard part is that in your CSS you'll have to probably prevent some chat sensitive styles to be overwritten by the host page styles. Be careful.
- Uses: people are gonna love it. If you want users to keep your link or logo you can ask them to keep the copyright or the link. You cannot count that this will happen. If you sell your app, or you just don't care, than I find this use the proper one.
- Scroll and heights of chat elements are aware of the surrounding document. My suggestion here is to create a fluid chat app using
%. That way your app will fit inside every container, and if it's a fluid page... more love for you.
So even if I would personally choose the <div> one, it's totally up to your needs.
Regarding scrollability I've created a nice UI technique:
- Create a variable-flag that will register if the scrollable area is hovered
- after you ping the server for the new message, run a function that will scroll the area to bottom
- if the scrollable area is hovered means that the user is reading old chats
- on mouseleave = scroll automatically the chat to the bottom (last conversation)
HTML:
<div class="chat">
<div class="messages">
<div>Old message</div>
</div>
<textarea></textarea>
<button>Post</button>
</div>
BASIC CSS (more CSS in the demo link):
.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);
这篇关于聊天应用可滚动div或iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
