javascript - 保持列表中的滚动位置

Question

我有一个选择列表，其中填充了我的日志文件。每隔一个 javascript 就会向服务器发送 GET 请求，服务器读取日志文件并填充列表。但在每次 GET 请求之后，列表都会滚动回顶部。我想要做的是使请求不影响滚动，以便我可以自由滚动列表。

<select id = "list" name=servers size=38 style=width:1028px>

<script type="text/javascript">
window.onload = function () {

  if (bytes === undefined) {
      var bytes=0;
  }
  var url = "/test/log.php?q=";
  function httpGet(url)
  {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.onload = function (e) {
        if (xhttp.readyState === 4) {
            if (xhttp.status === 200) {
                var list = "";
                console.log(xhttp.responseText);
                obj = JSON.parse(xhttp.responseText);
                for(var key in obj) {
                list += obj[key];
                if (sessionStorage.logfile == null) {
                    sessionStorage.logfile == "Log";
                }

            }
              bytes = parseInt(list);
              document.getElementById("list").innerHTML = sessionStorage.logfile + list;
              sessionStorage.logfile += list; 
            }
        };
        xhttp.onerror = function (e) {
        console.error(xhttp.statusText);
      }
    };


    xhttp.send();
  }

  var updateInterval = 1000; 
  function update() {

    httpGet(url + bytes);
      setTimeout(update, updateInterval);
  }

  update();
}
</script>

Answer 1

也许你应该使用 SSE，检查一下: http://www.w3schools.com/html/html5_serversentevents.asp ，但如果您只需要使代码正常工作，请执行以下操作:

<select id = "list" name=servers size=38 style=width:1028px>

<script type="text/javascript">

//here, a new global var to keep the index;
var old_index=-1;


window.onload = function () {
 //every change on select list, we register in this function..
 document.getElementById("list").onchange = keepValue;



  if (bytes === undefined) {
      var bytes=0;
  }
var url = "/test/log.php?q=";
function httpGet(url)
{
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", url, true);
  xhttp.onload = function (e) {
      if (xhttp.readyState === 4) {
          if (xhttp.status === 200) {
              var list = "";
              console.log(xhttp.responseText);
              obj = JSON.parse(xhttp.responseText);
              for(var key in obj) {
              list += obj[key];
              if (sessionStorage.logfile == null) {
                  sessionStorage.logfile == "Log";
              }

          }
            bytes = parseInt(list);
            document.getElementById("list").innerHTML = sessionStorage.logfile + list;
            sessionStorage.logfile += list;
            //here, back it to the old selected index
            //when old_index=-1, means first execution
            if (old_index==-1)
            {old_index = document.getElementById("list").length-1;}
            document.getElementById("list").selectedIndex = old_index;
          }
      };
      xhttp.onerror = function (e) {
      console.error(xhttp.statusText);
    }
  };


xhttp.send();
}

var updateInterval = 1000; 
function update() {
  httpGet(url + bytes);
  //i will not change your logic here, but you can write it using setInterval instead.
  setTimeout(update, updateInterval);
}

update();
}

//here, the function to register the list index
function keepValue(evt)
{

old_index = evt.target.selectedIndex;
//or document.getElementById('list').selectedIndex;

}

</script>

编辑:

ResponseText 为 JSON 格式。

{"key":"2186 <option>   18:42:19.716 7963       [DEBUG main() cnet.cpp:167]  Using public ip: 192.168.0.107 </option>
<option>   18:42:19.716 7963       [DEBUG main() cnet.cpp:168]  Using local ip: 192.168.0.107 </option>
<option>   18:42:19.717 7963       [DEBUG init() redis.cpp:75]  Initializing redis client application </option>"}