AjaxでChatを作る

何気なく、AjaxでChatを作り始めてしまった。
その続き。


Ajaxと言っても、そんなたいそうなことやってるわけじゃなくて、DHTMLのお勉強という方が割合として大きいんだけどね。
さて、
ここで、実際に試すことができます。毎度のことながら、誰もお客はいないので、一人で2窓して試してください。
コードはこちら
追記10/01/2005 サーバ移転に伴いリンク先が動かなくなりました。現在の最新版はこちらで試せます。
いじったこと(まとめ)
IEで発言するときにテキストボックスからフォーカスが抜ける問題に対処
メッセージ表示エリアの自動スクロールに対処
実際にやった作業の詳細
前回まで、htmのファイルの中にスクリプトを埋めてたけど、jsファイルとして外に出した。chat.jsとしてある。
各htmlエレメントのidとnameを付け直した。なんとなく、接頭子をつけてわかりやすくしようかと。
document.getElementById(‘formChat’)とやらずに、document.formChatと直接たどれるところは、直接たどるようにした。
直接たどれるものと、直接たどるとエラーになるものがあることに気がついたけど、どこからその差が出てくるのか不明。今後の宿題。
IE上で、発言すると、エディットボックスからフォーカスが抜ける。いちいちマウスクリックしないと連続して発言できない。うっとうしい。という問題に対処。
postForm関数の最後に、txtMessage.focus();と入れただけだけど。。。
textareaに結果を出力してるが、スクロールが必要な状態になると、いちいち一番上に戻る。勝手にスクロールするようにしなければ。という問題に対処。
textareaで結果を出力しているが、こいつでスクロールのやりかたがわからんかったことと、今後メッセージごとに色をつけたりフォントを変えたりする(かもしれない)ので、それに困らないように、結果の出力先をtextareaから、iframeに変更。
iframeの先は、message.htmとしてある。message.htmの中身は<div>1個だけ。その<div>の子供として、テキストと<br>を追加していくことで、とりあえず、出力する。
最後の行にスクロールするには、docMessage.body.scrollTop=32000;ってやっただけ。
これらの作業をやってるときに見つけた、IEとFireFoxでの違い。(しっかりはまりました。)
IFrame先のdocumentにアクセスするのに、IEはfrm.document。FireFoxはfrm.contentWindow.document。
createTextNodeやcreateElementをして作った要素をdocumentに追加する際。createTextNodeを呼び出したdocumentと違うdocumentに追加しようとすると、IEでは怒られる。IEでは追加しようとするdocumentを使って要素を作らなければならない。
DHTMLって奥が深い。
というか思ったよりめんどくせぇ。
あと、このチャット使うと、定期的にchat.cgiを呼び出すので、Webサーバーのログがchat.cgiだらけになってしまう。。。。まぁええけど。

「AjaxでChatを作る」への2件のフィードバック

  1. ‘=’が入力できないぞ。途中にあるとそれ以降が表示されない。

データ へ返信するコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください