Question

我想在WebView中加载一个html文件并直接跳转到html中的id。

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

我找不到从代码导航到id的方法。

HTML的文件：

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

Answer 1

API about WebEngine说：

评估JavaScript表达式

可以在上下文中执行任意JavaScript代码   使用executeScript（java.lang.String）方法的当前页面。对于   例如：

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

因此，您可以在添加侦听器后使用executeScript()执行document.getElementById('id').scrollIntoView();以检查LoadWorker的状态（在API中阅读WebEngine部分加载网页：）

WebEngine webEngine = webview.getEngine();

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

Answer 2

我发现这个解决方案通过参数与WebView中的Html进行对话。

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

这是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>

在WebView中加载一个html文件并直接跳转到html

2 个答案: