使用Javascript/Ajax存在問題

-1

我正在處理類似於Facebook的消息框，該消息框在其中顯示消息。我得到它的工作，所以它刷新DIV每5秒內的消息，但是我試圖用設置滾動至底部：使用Javascript/Ajax存在問題

var div = document.getElementById('chat'); 
var y = (div.scrollHeight > div.offsetHeight) ? div.scrollHeight :div.offsetHeight; 
div.scrollTop = y; 
window.scrollTo(0, y);

這僅適用於我刷新DIV之前，任何人都可以向我解釋這個怎麼做？

此外，有沒有辦法通過發送請求到同一頁面來刷新div？

function ajax() { 
    var xmlhttp; 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (xmlhttp) { 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById('messages').innerHTML = xmlhttp.responseText; 
       setTimeout(function() { 
        ajax(); 
       }, 5000); 
      } 
     }; 
     xmlhttp.open('GET', 'refresh.php', true); 
     xmlhttp.send(null); 
    } 
} 

setTimeout(function() { 
    ajax(); 
}, 5000);

<div id="messages"> 
    <table id="chatbox"> 
     <thead>Admin</thead> 
     <tfoot> 
      <td> 
       <textarea id="chattextbox" name="text"></textarea></td> 
     </tfoot> 
     <tbody> 
      <td> 
       <div id="chat"> 
        <?php read_message($db); ?> 
       </div> 
      </td> 
     </tbody> 
    </table> 
    <style> 
     #chatbox { 
      overflow: scroll; 
      overflow-x: hidden; 
      word-wrap: !important; 
      height: 400px; 
      width: 300px; 
      padding: 0px; 
      border-right: solid 1px; 
      border-left: solid 1px; 
      border-top: solid 1px; 
      border-bottom: solid 1px; 
      resize: none; 
      max-width: 200px; 
     } 

     #chat { 
      overflow: scroll; 
      overflow-x: hidden; 
      word-wrap: break-word; 
      height: 400px; 
      width: 300px; 
      padding: 0px; 
      resize: none; 
      max-width: 300px; 
     } 

     #chattextbox { 
      width: 300px; 
      resize: none; 
      padding: 0px; 
     } 
    </style> 
</div> 
<script type="text/javascript"> 
    var div = document.getElementById('chat'); 
    var y = (div.scrollHeight > div.offsetHeight) ? div.scrollHeight : div.offsetHeight; 
    div.scrollTop = y; 
    window.scrollTo(0, y); 
</script>

來源

2012-12-28 HurricaneChris

首先，「刷新div」的含義是什麼（標準網絡條款中沒有這種東西，因此您需要澄清）。其次，你會考慮使用一個DOM操作庫，比如JQuery嗎？他們通常會使解決這樣的問題變得更容易。 – machineghost

顯示你的ajax代碼，我敢肯定，你正在發出一個異步ajax請求，所以你的代碼allways工作之前刷新... – ocanal

這是我所有的我的ajax代碼和刷新div我的意思是我打電話我的PHP功能檢查消息，並用新的信息替換舊的div使用'innerHTML = x' – HurricaneChris

只需將代碼（設置滾動到下）追加到了ajax成功函數，

function ajax(){ 
     var xmlhttp; 
     if(window.XMLHttpRequest){ 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else{ 
      // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     if(xmlhttp){ 
      xmlhttp.onreadystatechange = function(){ 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
        document.getElementById('messages').innerHTML = xmlhttp.responseText; 
        var div = document.getElementById('chat'); 
        var y = (div.scrollHeight > div.offsetHeight) ? div.scrollHeight :div.offsetHeight; 
        div.scrollTop = y; 
        window.scrollTo(0, y); 
        setTimeout(ajax, 5000); 
       } 
      }; 
      xmlhttp.open('GET', 'refresh.php', true); 
      xmlhttp.send(null); 
     } 
    }

而且你不需要爲setTimeout一個回調函數，如果你沒有任何參數，

setTimeout(ajax, 5000);

也會這樣做。

來源

2012-12-28 01:19:53 ocanal

這並不意味着頁面會每5秒跳。有些用戶不喜歡頁面移動時，他們不這樣做。 –

我試過這個，但是一旦它重新加載，它就不會起作用，它只是再次回到頂部 – HurricaneChris

@LeeMeador它不移動頁面，它只發送一個請求到不同的文件，返回新的消息每5秒 – HurricaneChris

只需調用內部下列功能的數據已經被添加之後。

window.setInterval(function() { 
    var div = document.getElementById('whatever_messagebox'); 
    div.scrollTop = div.scrollHeight; 
}, 5000);

來源

2012-12-28 01:16:59 John

你能解釋一點，我道歉我只是不知道你的意思是通過調用函數internaly – HurricaneChris

該函數內的代碼。 – John

所以，如果我要把功能的內部，我應該設置？ – HurricaneChris

使用Javascript/Ajax存在問題

回答

相關問題