load a html File inside an WebView and jump direct to an id inside the html

问题

I want to load a html File inside an WebView and jump direct to an id inside the html.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class HelpViewer extends Application {
   public static void main(String[] args) {launch(args);}

   @Override
   public void start(Stage stage) {
      WebView webview = new WebView();
webview.getEngine().load(HelpViewer.class.getResource("HelpViewer.html").toExternalForm());

      // does not work
      //     webview.getEngine().load(MapViewer.class.getResource("MapViewer.html#Headline2").toExternalForm());

      // does not work
      // webview.goto("#Headline2");

      stage.setScene(new Scene(webview, 200, 600, Color.WHITE));
      stage.show();
   }
}

I couldn't find a Way to navigate to an id from Code.

html-File:

<h1><a id="Headline1">Headline 1</a></h1> 
<p>GOTO <a href="#Headline2">Headline 2</a></p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<h1><a id="Headline2">Headline 2</a></h1>
<p>GOTO <a href="#Headline1">Headline 1</a></p>

</body></html>

回答1:

The API about WebEngine says:

Evaluating JavaScript expressions

It is possible to execute arbitrary JavaScript code in the context of the current page using the executeScript(java.lang.String) method. For example:

webEngine.executeScript("history.back()");

Hence, you can execute document.getElementById('id').scrollIntoView(); with executeScript() after adding a listener to check the state of the LoadWorker (read within the API about WebEngine the part Loading Web Pages as well):

WebEngine webEngine = webview.getEngine();

webEngine.getLoadWorker().stateProperty().addListener((ov, oldState, newState) -> {
   if (newState == Worker.State.SUCCEEDED) {
      webEngine.executeScript("document.getElementById('id').scrollIntoView();");
   }
});

回答2:

I found this Solution witch talkes via Parameter with the Html in the WebView.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;

public class HelpViewer extends Application {
   private WebEngine webEngine;
   private WebView   webView;

   @Override
   public void start(Stage primaryStage) {
      Button goToHeadline2Button = new Button("Go to Headline 2");
      Button goToHeadline1Button = new Button("Go to Headline 1");
      goToHeadline2Button.setOnAction(new EventHandler<ActionEvent>() {
         @Override
         public void handle(ActionEvent event) {
            sendHtmlToWebView("Headline2");
         }
      });
      goToHeadline1Button.setOnAction(new EventHandler<ActionEvent>() {
         @Override
         public void handle(ActionEvent event) {
            sendHtmlToWebView("Headline1");
         }
      });

      webView = new WebView();
      webView.setVisible(true);
      webEngine = webView.getEngine();
      webEngine.setJavaScriptEnabled(true);
      webEngine.load(getClass().getResource("HelpViewer.html").toExternalForm());

      HBox buttonHBox = new HBox();
      buttonHBox.getChildren().addAll(goToHeadline2Button, goToHeadline1Button);

      VBox rootVBox = new VBox();
      rootVBox.getChildren().addAll(buttonHBox, webView);

      Scene scene = new Scene(rootVBox, 300, 250);

      primaryStage.setTitle("Navigate!");
      primaryStage.setScene(scene);
      primaryStage.show();
   }

   private void sendHtmlToWebView(String jumpToHtmlId) {
      if (webEngine != null) {
         JSObject jSObject = (JSObject) webEngine.executeScript("window");
         jSObject.call("jumpToHtmlId", jumpToHtmlId);
      }
   }

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

This is the Html Stuff:

<!doctype html><html><head><meta charset="utf-8"></head>
<script language="javascript">
function jumpToHtmlId(object) {
   window.location.hash = '#'+object;
}
</script>
<body>

<h1><a id="Headline1">Headline 1</a></h1> 

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<h1><a id="Headline2">Headline 2</a></h1>

</body></html>

来源：https://stackoverflow.com/questions/41521749/load-a-html-file-inside-an-webview-and-jump-direct-to-an-id-inside-the-html

标签

javafx

webview