在JavaFX中从另一个WebView更改一个WebView

Question

我目前有两个WebViews（例如leftWebView和rightWebView）位于嵌入在Anchor窗格内的水平SplitPane中。每个WebView都有一个JavaScript（创建一个不同颜色的矩形）。现在我要做的是，在单击一个矩形时，我希望更改另一个WebView。问这个问题的一个简单方法是如何通过更改RightWebView调用leftWebView。

我的应用程序的UI如下所示：示例应用程序

以下是FXML、Controller和Java文件

public class Demo2 extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

public class FXMLDocumentController implements Initializable {
   
    @FXML
    private LeftWebView wvLeftWebView ;
    
    @FXML 
    private RightWebView wvRightWebView ;
    
    
    @FXML 
    public void myCustomAction(ActionEvent event) {
        System.out.println("mCustomAction(): Caught an event ");
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
    }                
}

LeftWebView和RightWebView类相似，除了javascript中的变化

public class LeftWebView  extends Region{
     
      WebView webView = new WebView();
      WebEngine webEngine = webView.getEngine();
     
      public LeftWebView(){
         
          // final URL urlHello = getClass().getResource("TimeGraph.html");
          // webEngine.load(urlHello.toExternalForm());
          
        webEngine.getLoadWorker().stateProperty().addListener(
            new ChangeListener<Worker.State>() {
                public void changed(ObservableValue<? extends Worker.State> p, Worker.State oldState, Worker.State newState) {
                    if (newState == Worker.State.SUCCEEDED) {
                        JSObject win = (JSObject) webEngine.executeScript("window");
                        win.setMember("javaObj", new Bridge());
                        System.out.println("LeftWebView(): Constructor");
                    }
                }
            }
        );        
        webEngine.loadContent(
            "<div style='width: 100; height: 100; background: green;' " +
                "onclick='javaObj.clickLeft();' />"
        );
        getChildren().add(webView);
        
    }
          
     
      @Override
      protected void layoutChildren(){
          double w = getWidth();
          double h = getHeight();
          layoutInArea(webView, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
          // layoutInArea(toolbar, 0, h-toolbarHeight, w, toolbarHeight, 0, HPos.CENTER, VPos.CENTER);
      }
     
}

public class Bridge {
    public void clickRight() {
        System.out.println("Bridge.clickRight() called");
    }
    
    public void clickLeft() throws IOException {
        System.out.println("Bridge.clickLeft() called");
        
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.getLoadWorker().stateProperty().addListener(
            new ChangeListener<Worker.State>() {
                public void changed(ObservableValue<? extends Worker.State> p, Worker.State oldState, Worker.State newState) {
                    if (newState == Worker.State.SUCCEEDED) {
                        JSObject win = (JSObject) webEngine.executeScript("window");
                        win.setMember("javaObj", new Bridge());
                        System.out.println("Bridge.clickLeft(): property Changed of LeftWebView");
                    }
                }
            }
        );        
        webEngine.loadContent(
            "<div style='width: 200; height: 200; background: blue;' " +
                "onclick='javaObj.test2();' />"
        );
        
        

        /*
        FXMLLoader fxmlLoader = new FXMLLoader();
        Pane p = fxmlLoader.load(getClass().getResource("FXMLDocument.fxml").openStream());
        FXMLDocumentController fooController = (FXMLDocumentController) fxmlLoader.getController();
        */
        
        /*
        URL location = getClass().getResource("MyController.fxml");
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(location);
        Parent root = (Parent) fxmlLoader.load(location.openStream());

        // How to get the handler for a specific element of my FXML
        */
        

    
    }
}

<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import demo2.RightWebView?>
<?import demo2.LeftWebView?>
<?import demo2.FXMLDocumentController?>

<AnchorPane fx:controller="demo2.FXMLDocumentController" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
    <SplitPane dividerPositions="0.4765886287625418" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"                
               prefHeight="400.0" prefWidth="600.0" >
      <items>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
             <children>
                <LeftWebView id="webLeft" fx:id="wvLeftWebView" prefHeight="-1.0" prefWidth="-1.0" onAction="#myCustomAction" />
             </children>
        </AnchorPane>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
             <children>
                <RightWebView id="webRight" fx:id="wvRightWebView" prefHeight="-1.0" prefWidth="-1.0" />
             </children>
        </AnchorPane>
      </items>
    </SplitPane>
</AnchorPane>

我能够通过Javascript回调类Bridge（Bridge.ClickLeft（））中的一个方法，但我不确定如何访问和更新另一个WebView。

Answer 1

通过其他问题，我找到了一个简单的解决方案：从JavaFX中的不同类更改标签的文本，并使用Javascript回调方法更改JavaFX标签

FXML文件包含两个web视图和一个标签（标签只是为了显示一个JavaFX控件）

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="webviewlabel.FXMLDocumentController">
   <children>
      <WebView fx:id="wvSample" layoutX="184.0" layoutY="16.0" prefHeight="200.0" prefWidth="175.0" />
      <WebView fx:id="wvAffected" layoutY="39.0" prefHeight="177.0" prefWidth="154.0" />
      <Label fx:id="lblSample" text="Label" />
   </children>
</AnchorPane>