チャット ルーム|更新|更新なし
非更新チャットルーム技術の実装方法
1. 統一名詞
テキストボックス:チャット内容を表示するフレームページ
入力ボックス:チャット情報を入力するフレームページ
リフレッシュボックス:自己更新して取得するフレームページこのページには最新のチャット情報が直接表示されません
2. 実現方法
更新なしとは、現在のテキスト ボックスのチャット コンテンツの背後に新しいチャット情報を継続的に追加することです。
これを実現する方法は、「更新」ではなく「新しい情報を追加」することです。
3. 技術的なポイント
chat.163.com のようなちらつきのないリフレッシュ チャット ルームを実装するために使用される主要なコード:
1. セルフリフレッシュ:
2. HTML ファイルにコードを書き込みます:
<script><br/>top.frametext.document.write("text"); <br/>1.frame.asp ページ。最も単純なものには 3 つのフレーム ページが含まれています <br/>テキスト ボックス Frametext.htm; name=frametext <br/>入力ボックス Framerefresh.asp; <br/><br/>2. 最も単純なテキスト コンテンツ。少し <br/><br/>3. 入力ボックスの Frameinput.asp の内容: <br/>少し <br/><br/>4. ボックスの Framefresh.asp の内容を更新 (キー) <br/>... <br/><% <br/>'最新のチャット情報を取得するには、ここのコードを使用します <br/>最新の情報は配列 ArrRecord() に保存されます <br/>'OutNum パラメータは、新しいチャット レコードが表示されるかどうかを記録します <br/><html> <br/><meta http-equiv="Content-Type" content = "text/html; charset=gb2312"> <br/><meta http-equiv="refresh" content="2"><!--最新の情報を入手するには --> .. <br/> <% <br/>if OutNum>0 then 'ユーザーにとって、新しい情報があれば新しい情報が出力され、そうでない場合は出力されません<br/>response.write "<script language=""javascript" ">" <br/> for i = 1 から <br/>response.write "top.frametext.document.write("""& ArrRecord(i) &""") <br/>next <br/>response.write "</ script>" <br/>end if <br/>%> <br/>.... <br/><br/>5. 関連する問題 <br/>1. 自己更新に関する問題の 1 つは、フォーカスの位置の問題 (つまり、自動スクロールの問題) です。ユーザーがテキスト ボックス <br/> に表示するのは、初めてチャットルームに入ったときに表示されたコンテンツの場所です。新しい情報 <br/> の場所までは自動的にスクロールされず、スクロール バーをスクロールする必要があります。 <br/>chat.163.com では、ユーザーが「自動スクロール」をクリックすることで実装されます。実際、「<br/>自動スクロール」を選択するだけで、テキスト ボックスのスクロールを制御する JS プログラムが有効になります。重要な部分は次のとおりです。 <br/>function ScrollWindow() <br/>{ <br/>.... <br/>this.scroll( 0, 65000); // テキストボックスを指定した位置までスクロールします。ここでは、左下隅を指す (0,65000) <br/> が選択されています。画面の高さが 600 未満であるため、ユーザーのチャット プロセス <br/> 中に (0,65000) の位置に到達することはほとんど不可能です。これにより、画面が常に一番下までスクロールするようになります。 <br/><br/>setTimeout('scrollWindow();',200); //ループ。それ以外の場合は、一度スクロールするだけでは意味がありません <br/>} <br/><br/>2. 画面を消去します。画面をクリアしてチャット ウィンドウを開いたままにすると、テキスト ボックス内のテキスト コンテンツが際限なく増加します。 <br/>画面をクリアするには、テキストボックスページを再読み込みします。 <br/> <br/>
<br/>
<br/>
<br/>
<br/>
<br/><br/></script>