Question

我有一个50x50 px div元素，我想在按Ctrl + K时更改其背景颜色。我该怎么做？

更新：在搜索了一下之后，我尝试了这段代码但仍然无法正常工作

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id="d" style="background-color: red; height: 50px; width: 50px;"></div>
    <script>
        const {ipcRenderer} = require('electron')
        ipcRenderer.on('changeCol', (event,color) => {
            document.getElementById('d').style.backgroundColor = color;
        })
        </script>
    </body>
</html>

这是main.js

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut;

let mainWindow 

function createWindow () {
      mainWindow = new BrowserWindow({width: 800, height: 600})
      mainWindow.loadURL(`file://${__dirname}/index.html`)
      mainWindow.webContents.openDevTools()

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

app.on('ready', function() {
    createWindow();

    // registered a shortcut for Ctrl+K
    globalShortcut.register('Control+K', () => {
        mainWindow.webContents.on('did-fininsh-load', () => {
            mainWindow.webContents.send('changeCol','green');
        })
    })
})

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

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

Answer 1

可能使用Accelerator Api

const {app, globalShortcut} = require('electron')

app.on('ready', () => {
  // Register a 'Control+K' shortcut listener.
  globalShortcut.register('Control+K', () => {
    // Do stuff when K and Command is pressed.
  })
})

然后只是一些简单的javascript，其中显示// Do stuff when K and Command is pressed.这将取决于您的HTML / CSS的设置方式以及您正在寻找的确切结果。

Answer 2

好吧，所以我发现我不能直接从main.js文件修改DOM。我们必须使用webContents.send()和ipcRenderer通过通道发送和接收异步消息。这里有一些简单的代码，可以让你修改div的背景颜色。

main.js

app.on('ready', function() {
    globalShortcut.register('A', () => {
        mainWindow.webContents.send('changeColor','green');
    });
});

的index.html

<script>
const {ipcRenderer} = require('electron')
ipcRenderer.on('changeColor', (event,col) => {
    var element = document.getElementById('element');
    element.style.color = col;
})
</script>

如何使用Electron

2 个答案: