JavaFX开发简易浏览器：如何实现点击+号标签新建标签页

所需修改 #

1. 调整MainController代码 #

给MainController实现Initializable接口，在初始化方法中为+号标签绑定选中事件监听器，原有方法无需改动，完整修改后的控制器代码如下：

package application;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.MenuButton;
import javafx.scene.control.Tab;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import javafx.scene.control.TabPane;

public class MainController implements Initializable {

    @FXML
    private VBox mainWindow;

    @FXML
    private VBox topPanel;

    @FXML
    private TabPane tabPane;

    @FXML
    private Tab addTab;

    @FXML
    private HBox topBrowserPane;

    @FXML
    private Button backBtn;

    @FXML
    private Button fowardBtn;

    @FXML
    private TextField addressBar;

    @FXML
    private Button refreshBtn;

    @FXML
    private MenuButton settingsBtn;

    // 原有全局WebView可删除，改为每个标签对应独立WebView逻辑更合理
    // @FXML
    // private WebView web;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        // 初始化默认的第一个标签
        Tab firstTab = tabPane.getTabs().get(0);
        firstTab.setClosable(true);
        firstTab.setContent(new WebView());

        // 绑定+号标签的选中事件
        addTab.setOnSelectionChanged(event -> {
            if (addTab.isSelected()) {
                // 创建新标签
                Tab newTab = new Tab("新标签页");
                newTab.setClosable(true);
                // 给新标签绑定独立的WebView
                newTab.setContent(new WebView());

                // 把新标签插入到+号标签前，保证+号永远在最后一位
                tabPane.getTabs().add(tabPane.getTabs().size() - 1, newTab);
                // 自动跳转到新创建的标签
                tabPane.getSelectionModel().select(newTab);
            }
        });
    }

    @FXML
    void getText(ActionEvent event) {
        // 地址栏输入跳转逻辑
        Tab selectedTab = tabPane.getSelectionModel().getSelectedItem();
        WebView currentWeb = (WebView) selectedTab.getContent();
        currentWeb.getEngine().load(addressBar.getText().trim());
    }

    @FXML
    void goBack(ActionEvent event) {
        // 后退按钮逻辑
        Tab selectedTab = tabPane.getSelectionModel().getSelectedItem();
        WebView currentWeb = (WebView) selectedTab.getContent();
        if (currentWeb.getEngine().getHistory().getCurrentIndex() > 0) {
            currentWeb.getEngine().getHistory().go(-1);
        }
    }

    @FXML
    void goFoward(ActionEvent event) {
        // 前进按钮逻辑
        Tab selectedTab = tabPane.getSelectionModel().getSelectedItem();
        WebView currentWeb = (WebView) selectedTab.getContent();
        if (currentWeb.getEngine().getHistory().getCurrentIndex() < currentWeb.getEngine().getHistory().getEntries().size() - 1) {
            currentWeb.getEngine().getHistory().go(1);
        }
    }

    @FXML
    void refresh(ActionEvent event) {
        // 刷新按钮逻辑
        Tab selectedTab = tabPane.getSelectionModel().getSelectedItem();
        WebView currentWeb = (WebView) selectedTab.getContent();
        currentWeb.getEngine().reload();
    }
}

2. （可选）修改FXML配置 #

• 如果你需要允许普通标签页关闭，找到FXML中TabPane的定义，把tabClosingPolicy="UNAVAILABLE"修改为tabClosingPolicy="ALL_TABS"即可，因为+号标签已经设置了closable="false"，修改后只有+号标签不能关闭，其他新建标签都支持手动关闭。
• 同时可以删除FXML中全局的WebView定义，因为现在每个标签页有独立的WebView。

修改后的TabPane片段参考：

<TabPane fx:id="tabPane" prefHeight="35.0" prefWidth="785.0" tabClosingPolicy="ALL_TABS">
    <tabs>
        <Tab text="New Tab" />
        <Tab fx:id="addTab" closable="false" text="+" />
    </tabs>
</TabPane>

内容的提问来源于stack exchange，提问作者Jinyoung Chang