electron 如何在电子应用程序中从html上的nodejs中查看os.hostname()模块？

xzv2uavs 于 2023-04-03 发布在 Electron

关注(0)|答案(1)|浏览(111)

这是我的第一篇文章，所以我很抱歉的事情.我挣扎着试图显示os.hostname（）模块从nodejs在一个html页面在一个电子应用程序，我得到的主机名在终端，但我不能得到它显示在应用程序页面当我运行它.
这是我的代码：
Javascript（index.js）

const { app, BrowserWindow, Tray, Menu} = require('electron');
const os = require('os');

if(os.hostname()) {
    var hostname = os.hostname();
    console.log("Hostname for the operating system is " + String(hostname));
}

app.on('ready', () => {

    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
         nodeIntegration: true
        }

    });

    mainWindow.loadURL(`file://${__dirname}/index.html`)
    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)

    })
})

HTML（index.html）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <Title>App</Title>
</head>

<body>
    <div class="header">
        <img src="picbig.png" alt="logo" />
        <h1>Wellcome</h1>
    </div>
    <p>Hostname:<span id="Hostname"></span></p>
    <script src="renderer.js"></script>
</body>
</html>

我希望我得到它清楚，如果任何人需要任何额外的信息，所以你可以帮助我，让我知道请！提前感谢你。
我尝试了所有我能找到的在html中显示javascript var的方法，但都不起作用：（

electron

来源：https://stackoverflow.com/questions/75886534/how-to-see-os-hostname-module-from-nodejs-on-html-in-a-electron-app

1条答案

按热度按时间

vd8tlhqk1#

我设法做到了，我错过了一个预加载文件连接一切。
下面是代码（和ofc的package.json，但我不会显示它，因为当你创建一个新的电子项目时，它是默认的）：
main.js

const { app, BrowserWindow, ipcMain } = require('electron');
const os = require('os');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: __dirname + '/preload.js'
    }
  });

  mainWindow.loadFile('index.html');

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

app.on('ready', createWindow);

ipcMain.handle('getHostname', async (event, arg) => {
  return os.hostname();
});

preload.js

const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.invoke('getHostname').then(hostname => {
    document.getElementById('hostname').textContent = `Hostname: ${hostname}`;
  });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron App</title>
  </head>
  <body>
    <h1 id="hostname"></h1>
    <script src="renderer.js"></script>
  </body>
</html>

赞(0）回复(0）举报 2023-04-03

我来回答

electron 如何在电子应用程序中从html上的nodejs中查看os.hostname()模块？

1条答案

相关问题

热门标签

最新问答