0

PHPとAsyncjavascriptを使用してインスタントチャットサービスを作成しています。メッセージはデータベースから取得され、テキスト領域に配置されます。問題は、メッセージが新しいメッセージをチェックして取得するために使用されるsetInterval（）関数をスクロールするためにテキストエリアを必要とする場合、テキストエリアをスクロールの高さの一番上に強制的に戻すことです。

私はいくつかの解決策を見てきましたが、これまでのところどれもうまくいきませんでした。scrollTopをscrollHeightと等しくなるように設定しようとしましたが、役に立ちませんでした。

ここにいくつかのコードがあります：

window.onload = function()
{
    if(getUrlVars()['to'] != null)
        setInterval(GetMessages, 1000);
}

function ToServer(cmd, data)
{
    xmlObj = new XMLHttpRequest();
    xmlObj.open('POST','handler.php',true);
    xmlObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlObj.send(cmd + data);
    xmlObj.onreadystatechange = function()
    {
        if(xmlObj.readyState == 4 && xmlObj.status == 200)
        {
            if(cmd == 'cmd=push')
            {
                document.getElementById('pushResponse').innerHTML = xmlObj.responseText;
            }
            if(cmd == 'cmd=pop')
            {
                document.getElementById('messages').value += xmlObj.responseText;
            }

        }
    }
}

function GetMessages()
{
    // Grab account hash from auth cookie
    aHash = readCookie('privateChat');
    to = getUrlVars()['to'];
    ToServer('cmd=pop','&account=' + aHash + '&to=' + to);
    textArea = document.getElementById('messages');
    textArea.scrollTop = textArea.scrollHeight;
}

そしてここにHTMLがあります：

<!DOCTYPE HTML>

<html>

<head>
    <meta charset="ISO-8859-1">
    <title>Private Chat</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div>
        <h2>Conversation with {%RECIPIENT%}</h2>
        <div id="fieldContainer">
            <textarea col="10" rows="5" name="messageBox" id="messages"></textarea>
        </div>
    </div>

    <div>
        <legend>Message</legend>
        <div id="fieldContainer">
            <input type="text" id="msgBox">
        </div>
    </div>
    <div>
        <input type="button" name="fSend" value="Send message" onClick="SendMessage();">
    </div>
    <div id="pushResponse">Response</div>

    <script src="Chat.js"></script>
</body>

</html>

ありがとう！

4

0 に答える 0