Electron如何通过searchWebsite.html输入修改mainWindow.loadURL加载地址

这个需求完全可以实现，你可以通过Electron的IPC（进程间通信）机制完成两个窗口之间的消息传递，具体修改步骤如下：

第一步：修改主进程main.js代码 #

首先补全依赖引入，新增IPC监听事件，修改后的完整代码如下：

const { app, BrowserWindow, Menu, ipcMain } = require("electron");
const path = require('path')
const url = require('url')

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      preload: `${__dirname}/preload.js`
    }   
  });
  mainWindow.loadURL("https://google.com");

  mainWindow.on("closed", function() {
    mainWindow = null;
  }); 
}

// 监听搜索窗口传递的网址，更新主窗口加载地址
ipcMain.on('load-website', (event, websiteUrl) => {
  // 可选兼容逻辑：用户没输入http/https前缀时自动补全
  if (!/^https?:\/\//i.test(websiteUrl)) {
    websiteUrl = 'https://' + websiteUrl
  }
  mainWindow.loadURL(websiteUrl)
  // 加载后自动关闭搜索窗口
  BrowserWindow.fromWebContents(event.sender).close()
})

function toggleFullscreen() {
    if (mainWindow.isFullScreen()) {
        mainWindow.setFullScreen(false);
    } else {
        mainWindow.setFullScreen(true);
    } 
}

function createSearchWebsite(){
  addWindow = new BrowserWindow({
      width: 300,
      height: 200,
      title:'Search website',
      webPreferences: {
          nodeIntegration: true,
          contextIsolation: false 
      }    
  });
  addWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'searchWebsite.html'),
      protocol: 'file:',
      slashes: true   
  }));
  addWindow.on('close', function(){
      addWindow = null;   
  }); 
}

function createMainMenu() {   
  const template = [
    {
      label: "Options",
      submenu: 
      [
        {
            label: "Quit",
            accelerator: "CmdOrCtrl+Q",
            click() {
              app.quit();
          }
        },
        {
            label: 'Toggle full screen',
            accelerator: 'CmdOrCtrl+F',
            click: () => {
            toggleFullscreen();
          }
        },
        {
            label: 'Search new website',
            accelerator: 'CmdOrCtrl+N',
            click() {
              createSearchWebsite();
          }
        },
        {
            label: 'Toggle developer tools',
            accelerator: 'CmdOrCtrl+I',
            click(item, focusedWindow){
              focusedWindow.toggleDevTools();
          }
        }
      ]
    }   
  ];
  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu); 
}

app.on("ready", () => {   
  createWindow();
  createMainMenu(); 
});

app.on("window-all-closed", function() {
  if (process.platform !== "darwin") {
    app.quit();
  } 
});

app.on("activate", function() {
  if (mainWindow === null) {
    createWindow();
  } 
});

第二步：修改searchWebsite.html代码 #

替换原有错误引入的主进程script，新增表单提交逻辑，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Search website </title>
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
    <div class="container">
        <form>
            <div>
                <label>Enter website</label>
                <input type="text" id="website" autofocus>
            </div>
            <button class="btn waves-effect waves-light" type="submit">Search website</button>
        </form>
    </div>
    <script>
        const { ipcRenderer } = require('electron')
        const form = document.querySelector('form')
        form.addEventListener('submit', (e) => {
            // 阻止表单默认提交刷新页面的行为
            e.preventDefault()
            const inputVal = document.getElementById('website').value.trim()
            if (inputVal) {
                ipcRenderer.send('load-website', inputVal)
            }
        })
    </script>
</body>
</html>

补充说明 #

当前你给搜索窗口配置了nodeIntegration: true和contextIsolation: false，这种配置存在安全风险，如果你的应用需要对外发布，建议改为通过preload脚本暴露IPC方法的方式实现交互，安全性更高。

修改完成后重启项目即可生效，按下快捷键调出输入窗口输入网址提交后，主窗口就会自动加载对应站点。

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