如何在Electron应用的HTML页面中显示Node.js的os.hostname()结果

你的问题核心是主进程与渲染进程的上下文隔离：在index.js（主进程）中获取的hostname变量，无法直接被渲染进程（HTML页面）访问到，两者是独立的执行环境。下面提供两种可行的解决方法：

方法一：直接在渲染进程中获取主机名（简单快速） #

因为你已经在BrowserWindow配置中开启了nodeIntegration: true，渲染进程可以直接调用Node.js模块。只需在renderer.js中添加以下代码：

const os = require('os');
// 获取页面中的Hostname元素并赋值
document.getElementById('Hostname').textContent = os.hostname();

方法二：通过IPC通信传递数据（规范推荐） #

如果后续需要关闭nodeIntegration（Electron官方推荐的安全做法），可以用主进程向渲染进程发送数据的方式：

1. 修改主进程index.js，在窗口加载完成后发送主机名：

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
         nodeIntegration: true
        }
    });

    mainWindow.loadURL(`file://${__dirname}/index.html`);

    // 窗口加载完成后发送数据
    mainWindow.webContents.on('did-finish-load', () => {
        const hostname = os.hostname();
        mainWindow.webContents.send('hostname-data', hostname);
    });

    // 其余托盘相关代码保持不变
    tray = new Tray('pic.PNG')
    tray.setToolTip('Tray App')
    tray.on("click",() =>{
        mainWindow.isVisible()?mainWindow.hide():mainWindow.show()
        let template =[{label:'Hostname'},{label:'DNS'}]
        let contextMenu= Menu.buildFromTemplate(template)
        tray.setContextMenu(contextMenu)
    })
})

2. 在渲染进程renderer.js中接收数据并更新页面：

const { ipcRenderer } = require('electron');
ipcRenderer.on('hostname-data', (event, hostname) => {
    document.getElementById('Hostname').textContent = hostname;
});

两种方法都能解决你的问题，方法一适合快速验证，方法二更符合Electron的安全规范。

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