如何在ElectronJS中为多标签Webview添加前进、后退、刷新按钮

步骤1：确认主进程配置 #

Electron 10+ 版本默认关闭webview标签支持，首先要确保主进程创建窗口时开启对应配置：

const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    webviewTag: true, // 必须开启，否则webview相关API无法调用
    nodeIntegration: true,
    contextIsolation: false
  }
})

步骤2：新增控制按钮到HTML #

你可以在标签内容区域上方加一套通用控制栏，无需每个标签单独配置：

<div class="contentArea">
  <div id="mySidebar" class="leftMenu">
    <!-- 原有侧边栏标签代码保持不变 -->
  </div>
  <!-- 新增控制按钮栏 -->
  <div class="control-bar py-2 px-3">
    <button id="backBtn" class="btn btn-sm btn-secondary mr-1">后退</button>
    <button id="forwardBtn" class="btn btn-sm btn-secondary mr-1">前进</button>
    <button id="refreshBtn" class="btn btn-sm btn-secondary">刷新</button>
  </div>
  <div class="contentPages tab-content">
    <!-- 原有tab-pane和webview代码保持不变 -->
  </div>
</div>

步骤3：补充控制逻辑 #

直接在你原有script标签内添加对应交互代码即可：

$(document).ready(function () {
  // 你原有标签切换逻辑保持不变
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var activeTab = $(e.target).text();
    var previousTab = $(e.relatedTarget).text();
    $(".active-tab span").html(activeTab);
    $(".previous-tab span").html(previousTab);
  });

  // 获取当前激活标签对应的webview实例
  function getActiveWebview() {
    return $('.tab-pane.active webview')[0];
  }

  // 后退逻辑
  $('#backBtn').on('click', function() {
    const webview = getActiveWebview();
    if (webview && webview.canGoBack()) {
      webview.goBack();
    }
  });

  // 前进逻辑
  $('#forwardBtn').on('click', function() {
    const webview = getActiveWebview();
    if (webview && webview.canGoForward()) {
      webview.goForward();
    }
  });

  // 刷新逻辑
  $('#refreshBtn').on('click', function() {
    const webview = getActiveWebview();
    if (webview) {
      webview.reload();
    }
  });

  // 可选：页面跳转后自动禁用/启用前进后退按钮
  $('webview').on('did-navigate', function() {
    const webview = getActiveWebview();
    $('#backBtn').prop('disabled', !webview.canGoBack());
    $('#forwardBtn').prop('disabled', !webview.canGoForward());
  });
});

如果需要每个标签单独带控制按钮，只需要把按钮放到对应tab-pane内部，调整getActiveWebview逻辑为获取当前按钮所属tab下的webview即可，核心API调用逻辑完全通用。

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