2014-04-01 47 views
5

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

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

    } 
} 

有没有办法以编程方式设置web视图的滚动条位置?

回答

2

找出来。使用JavaScript,可以以编程方式滚动网页视图。

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; 
    } 
}