JavaFx WebView - 滚动到所需位置答案

【问题标题】：JavaFx WebView - Scroll to desired positionJavaFx WebView - 滚动到所需位置
【发布时间】：2014-05-11 18:37:17
【问题描述】：

我正在尝试创建一个 Web 视图并向其中添加内容。将在单击按钮时将内容附加到 Web 视图。在这里，我需要以编程方式将 Web 视图滚动到所需的位置，例如 (0, 60)。我尝试使用 JavaScript 并使用 ScrollBar 类的 setValue。但没有任何结果。这是示例，

public class FxWebViewSample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {

        Group root = new Group();

        final WebView wView = new WebView();
        wView.setId("my_view");
        wView.setPrefHeight(200);
        wView.setPrefWidth(200);
        final WebEngine engine = wView.getEngine();
        engine.loadContent("<body contentEditable='true'><div id='content'>Initial Text</div><div id='first'>My first web view in fx</div></body><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><div id='first'>My first web view in fx</div></body></body>");

        Button appendbtn = new Button("Append Text to Web View");

        TextArea area = new TextArea();
        area.setText("My text area");

        VBox vBox = new VBox();
        vBox.getChildren().addAll(wView, appendbtn);
        root.getChildren().add(vBox);

        Scene scene = new Scene(root, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.show();

        appendbtn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                /** To append html and text contents to web view */
                String webViewContents = (String) engine
                        .executeScript("document.documentElement.outerHTML");
                String appendContent = "<div>Appended html content</div> Appended text content";
                engine.loadContent(webViewContents + appendContent);

                /**JavaScript to scroll the view*/
                //String scrollJsFtn = "var elem = document.getElementById('my_view');var x = 0;var y = 0;while (elem != null) {x += elem.offsetLeft;y += elem.offsetTop;elem = elem.offsetParent;}window.scrollTo(30, 30);";
                //engine.executeScript(scrollJsFtn);

                Set<Node> scrollBars = wView.lookupAll(".scroll-bar");
                for (Node node : scrollBars) {
                    if (node instanceof ScrollBar) {
                        ScrollBar sBar = (ScrollBar) node;
                        sBar.setValue(100.0);
                    }
                }
            }
        });

    }
}

有没有办法以编程方式设置网页视图的滚动条位置？

【问题讨论】：

标签： java javafx javafx-2 scrollbar

【解决方案1】：

想办法。使用 JavaScript 可以通过编程方式滚动 Web 视图。

public class FxWebViewSample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {

        Group root = new Group();

        final WebView wView = new WebView();
        wView.setId("my_view");
        wView.setPrefHeight(200);
        wView.setPrefWidth(200);
        final WebEngine engine = wView.getEngine();
        engine.setJavaScriptEnabled(true);
        engine.loadContent("<body contentEditable='true'><div id='content'>Initial Text</div><div id='first'>My first web view in fx</div></body><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><span id='second'>My first web view in fx</span><div id='first'>My first web view in fx</div></body></body>");

        Button appendbtn = new Button("Append Text to Web View");

        TextArea area = new TextArea();
        area.setText("My text area");

        VBox vBox = new VBox();
        vBox.getChildren().addAll(wView, appendbtn);
        root.getChildren().add(vBox);

        Scene scene = new Scene(root, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.show();

        appendbtn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                /** To append html and text contents to web view */
                String webViewContents = (String) engine
                        .executeScript("document.documentElement.outerHTML");
                String appendContent = "<div id='append'>Appended html content</div> Appended text content";

                StringBuilder scrollHtml = scrollWebView(0, 50);

                engine.loadContent(scrollHtml + webViewContents + appendContent);
            }
        });

    }

    public static StringBuilder scrollWebView(int xPos, int yPos) {
        StringBuilder script = new StringBuilder().append("<html>");
        script.append("<head>");
        script.append("   <script language=\"javascript\" type=\"text/javascript\">");
        script.append("       function toBottom(){");
        script.append("           window.scrollTo(" + xPos + ", " + yPos + ");");
        script.append("       }");
        script.append("   </script>");
        script.append("</head>");
        script.append("<body onload='toBottom()'>");
        return script;
    }
}

【讨论】：