您的位置：首页 > 其它

frameset 实现无刷新聊天室技术实现方法

2012-04-10 17:12 302 查看

一、统一名词

文字框：显示聊天内容的框架页面

输入框：输入聊天信息的框架页面

刷新框：自刷新获取最新聊天信息的框架页面，该页面不直接显示出来

二、如何实现

实现无刷新，就是要在当前文字框聊天内容后面不断的添加新的聊天信息。

实现的方式是“添加新信息”，而不是“重新刷新”。

三、技术要点

实现像chat.163.com的无闪烁刷新的聊天室要用到的关键代码：

1.自刷新：

<meta http-equiv="refresh" content="2">

2.向html文件写代码:

<script>

top.frametext.document.write("text");

</script>

四、例子

1.frame.asp页面。最简单的包含三个框架页

文本框frametext.htm;name=frametext

输入框frameinput.asp;

刷新框framerefresh.asp;

2.文本框frametext.htm内容：

最简单的文本内容。略

3.输入框frameinput.asp内容：

略

4.刷新框framefresh.asp内容（关键）

......

<%

'此处用代码获取最新的聊天信息

'最新信息保存在数组ArrRecord()

'OutNum参数纪录是否有新的聊天纪录出现

%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta http-equiv="refresh" content="2">

.....

<%

if OutNum>0 then '对于用户来讲，如果有新的信息的话，则输出新信息,否则不

输出

　 response.write "<script language=""javascript"">"

　 for i = 1 to outnum　　　　　　　　　　　　　

　　　　　　　　response.write "top.frametext.document.write("""& ArrRecord(i) &""")

;"

　　　　next

　　　　response.write "</script>"

end if

%>

.....

五、相关问题

1.自刷新存在的一个问题是焦点定位问题（也就是自动滚屏的问题）。用户在文

本框看到的都是第一次进入chatroom看到的内容的位置，不会自动滚屏到新信息

的位置，必须滚动滚动栏才可以。

在chat.163.com，它通过用户点选“自动滚屏”的方法来实现。其实就是选择“

自动滚屏”，程序将启用控制文本框滚屏的一个js程序，关键部分为：

function ScrollWindow()

{

.....

this.scroll(0, 65000); //将文本框scroll到指定的位置。这里选定(0,65000)

,就是指向最左下角的位置，由于屏幕高度才600不到，所以在一个用户聊天过程

中，几乎永远不可能达到(0,65000)的位置。这样就保证了屏幕永远滚到最底层。

setTimeout('scrollWindow();',200); //循环。否则只滚动一次是没用的

}

2.清屏。如果不清屏，一直开着聊天窗口，文本框文字内容将永无止境的增加。

清屏可以通过reload 文本框页面的方法实现。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航