2016-12-12 3 views
0

Я использую простой http-сервер и создал контекст для вывода вывода на печать.Автоматическая прокрутка страницы загрузки html

  server.createContext("/log", new HttpHandler() { 

      @Override 
      public void handle(final HttpExchange t) throws IOException { 
       t.getResponseHeaders().set("Content-Type", "text/html; charset=UTF-8"); 
       t.sendResponseHeaders(200, 0); 
       Writer out = new OutputStreamWriter(t.getResponseBody(), "UTF-8"); 
       out.write("<pre>"); 
       Semaphore s = new Semaphore(0); 

       ExecutionContext.setLogger(new ILogger() { 

        @Override 
        public void log(String message) { 
         try { 
          out.write(message); 
          out.flush(); 
         } catch (IOException e) { 
          s.release(); 
         } 
        } 
       }); 

       try { 
        s.acquire(); 
       } catch (InterruptedException e) { 
       } 

      } 

Выходной поток никогда не закрывается, если коннекция не заканчивается (например, пользователь закрывает вкладку браузера). Работает так, как ожидалось, за исключением того, что мой браузер не прокручивает новые данные, когда они доступны.

Я знаю, что можно прокручивать до div с помощью javascript, но я не могу найти хороший метод для этого (мне нужно будет вызывать код javascript каждый раз, когда будут доступны новые данные, и даже если бы я мог, div не будет в конце страницы, потому что страница всегда обновляется ...)

У вас есть решение?

Благодаря

EDIT: Решение вдохновлен ответ Sen Иакова: server.createContext ("/ журнал", новый HttpHandler() {

  @Override 
      public void handle(final HttpExchange t) throws IOException { 
       t.getResponseHeaders().set("Content-Type", "text/html; charset=UTF-8"); 
       t.sendResponseHeaders(200, 0); 
       Writer out = new OutputStreamWriter(t.getResponseBody(), "UTF-8"); 
       StringBuilder sb = new StringBuilder(); 
       sb.append("<html>\n"); 
       sb.append("<body>\n"); 
       sb.append("<pre id='logger'></pre>\n"); 
       sb.append("<script>\n"); 
       sb.append("var logger = document.getElementById('logger');\n"); 
       sb.append("\n"); 
       sb.append("function addLog(s) {\n"); 
       sb.append(" // scroll only if already at the end of the page\n"); 
       sb.append(" var scroll = document.body.scrollTop + document.body.clientHeight == document.body.scrollHeight\n"); 
       sb.append(" logger.innerHTML += s;\n"); 
       sb.append(" if(scroll) {\n"); 
       sb.append(" window.scrollTo(0,document.body.scrollHeight);\n"); 
       sb.append(" }\n"); 
       sb.append("}</script>\n"); 

       out.write(sb.toString()); 

       Semaphore s = new Semaphore(0); 

       ExecutionContext.setLogger(new ILogger() { 

        @Override 
        public void log(String message) { 
         try { 
          message = StringEscapeUtils.escapeEcmaScript(message); 
          out.write("\n<script>addLog('" + message + "')</script>"); 
          out.flush(); 
         } catch (IOException e) { 
          s.release(); 
         } 
        } 
       }); 

       try { 
        s.acquire(); 
       } catch (InterruptedException e) { 
       }      
      } 
+0

Страница не может обновляться быстрее, чем может работать JavaScript, поэтому вы можете потерять настоящие обновления «в реальном времени», но прокрутка должна работать на каждом журнале, полученном с использованием примера, который дал Сен Джейкоб в его ответе. – petryuno1

+0

Я не уверен, почему я потерял обновления. С решением, которое я добавил в свой пост, все должно быть хорошо, потому что я прокручиваю только после обновления содержимого страницы. – jaudo

ответ

3

Вот example Javascript код, где вы можете выделите добавляемого запись в журнале.

var logger = document.getElementById("logger"); 
 
function addLog() { 
 
\t // add new log entry 
 
    var div = document.createElement("div"); 
 
    div.innerHTML = "log - " + Date.now(); 
 
    logger.appendChild(div); 
 
    // scroll to new log 
 
    logger.scrollTop = logger.scrollHeight; 
 
} 
 
// simulate http response 
 
var timer = setInterval(addLog, 1000); 
 
window.onbeforeunload = clearInterval.bind(window, timer);
#logger { 
 
    height: 10em; 
 
    overflow-y: auto; 
 
}
<div id="logger"></div>

+1

Спасибо, я адаптировал ваше решение, чтобы получить именно то, что я хотел – jaudo

Смежные вопросы