Question

我使用简单的http服务器并创建了一个上下文来打印我的记录器输出。

            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) {
                }

            }

除非连接结束（例如，用户关闭浏览器选项卡），否则OutputStream永远不会关闭。它按预期工作，但我的浏览器在可用时没有滚动到新数据。

我知道可以使用javascript滚动到div，但我找不到一个很好的方法来执行此操作（我需要在每次有新数据时调用javascript代码，甚至如果可以的话，div不会在页面的末尾，因为页面总是在更新......）

你有解决方案吗？

谢谢

编辑：解决方案受到Sen Jacob的回答： server.createContext（＆＃34; / log＆＃34;，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");
                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) {
                }                    
            }

Answer 1

这是一个example javascript代码，您可以在其中滚动到新添加的日志条目。

var logger = document.getElementById("logger");
function addLog() {
	// 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>

自动滚动加载html页面

1 个答案: