|
無(wú)刷新聊天室技術(shù)實(shí)現(xiàn)方法
一、統(tǒng)一名詞
文字框：顯示聊天內(nèi)容的框架頁(yè)面
輸入框：輸入聊天信息的框架頁(yè)面
刷新框：自刷新獲取最新聊天信息的框架頁(yè)面，該頁(yè)面不直接顯示出來(lái)
二、如何實(shí)現(xiàn)
實(shí)現(xiàn)無(wú)刷新，就是要在當(dāng)前文字框聊天內(nèi)容后面不斷的添加新的聊天信息。
實(shí)現(xiàn)的方式是“添加新信息”，而不是“重新刷新”。
三、技術(shù)要點(diǎn)
實(shí)現(xiàn)像chat.163.com的無(wú)閃爍刷新的聊天室要用到的關(guān)鍵代碼：
1.自刷新：
<meta http-equiv="refresh" content="2">
2.向html文件寫(xiě)代碼:
<script>
top.frametext.document.write("text");
</script>
四、例子
1.frame.asp頁(yè)面。最簡(jiǎn)單的包含三個(gè)框架頁(yè)
文本框frametext.htm;name=frametext
輸入框frameinput.asp;
刷新框framerefresh.asp;
2.文本框frametext.htm內(nèi)容：
最簡(jiǎn)單的文本內(nèi)容。略
3.輸入框frameinput.asp內(nèi)容：
略
4.刷新框framefresh.asp內(nèi)容（關(guān)鍵）
......
<%
'此處用代碼獲取最新的聊天信息
'最新信息保存在數(shù)組ArrRecord()
'OutNum參數(shù)紀(jì)錄是否有新的聊天紀(jì)錄出現(xiàn)
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="refresh" content="2"><!--定時(shí)刷新獲取最新信息-->
.....
<%
if OutNum>0 then '對(duì)于用戶來(lái)講，如果有新的信息的話，則輸出新信息,否則不
輸出
response.write "<script language=""javascript"">"
for i = 1 to outnum
response.write "top.frametext.document.write("""& ArrRecord(i) &""")
;"
next
response.write "</script>"
end if
%>
.....
五、相關(guān)問(wèn)題
1.自刷新存在的一個(gè)問(wèn)題是焦點(diǎn)定位問(wèn)題（也就是自動(dòng)滾屏的問(wèn)題）。用戶在文
本框看到的都是第一次進(jìn)入chatroom看到的內(nèi)容的位置，不會(huì)自動(dòng)滾屏到新信息
的位置，必須滾動(dòng)滾動(dòng)欄才可以。
在chat.163.com，它通過(guò)用戶點(diǎn)選“自動(dòng)滾屏”的方法來(lái)實(shí)現(xiàn)。其實(shí)就是選擇“
自動(dòng)滾屏”，程序?qū)⒂每刂莆谋究驖L屏的一個(gè)js程序，關(guān)鍵部分為：
function ScrollWindow()
{
.....
this.scroll(0, 65000); //將文本框scroll到指定的位置。這里選定(0,65000)
,就是指向最左下角的位置，由于屏幕高度才600不到，所以在一個(gè)用戶聊天過(guò)程
中，幾乎永遠(yuǎn)不可能達(dá)到(0,65000)的位置。這樣就保證了屏幕永遠(yuǎn)滾到最底層。
setTimeout('scrollWindow();',200); //循環(huán)。否則只滾動(dòng)一次是沒(méi)用的
}
2.清屏。如果不清屏，一直開(kāi)著聊天窗口，文本框文字內(nèi)容將永無(wú)止境的增加。
清屏可以通過(guò)reload 文本框頁(yè)面的方法實(shí)現(xiàn)。
|
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
