javascript - How do I make button close Electron-JS app? - Stack Overflow

Code:index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><

Code:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>Youtify</title>
  </head>
  <body>
        <div id = "leftBar"></div>
        <div id = "rightBar"></div>
        <div id = "bottomBar"><hr></div>
        <div id = "toolButtons">
          <div id ="closeBtn"><a data-text="✖"></a></div>
          <div id="maxBtn"><a data-text="❐" ></a></div>
          <div id="minBtn"><a data-text="─" ></a></div>
        </div>
    <script src="./renderer.js"></script>
  </body>
</html>

main.js

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

function createWindow () {   const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,   })

  mainWindow.loadFile('index.html') }

app.whenReady().then(() => {   createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()   }) })

renderer.js

// close app
function closeApp(e) {
  e.preventDefault();
  app.quit();
}

document.getElementById("closeBtn").addEventListener("click", closeApp);

What I want is to click on the button with the id "closeBtn" to close the app, I was looking for it, but I just can't make it working. Can anyone please help?

Code:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>Youtify</title>
  </head>
  <body>
        <div id = "leftBar"></div>
        <div id = "rightBar"></div>
        <div id = "bottomBar"><hr></div>
        <div id = "toolButtons">
          <div id ="closeBtn"><a data-text="✖"></a></div>
          <div id="maxBtn"><a data-text="❐" ></a></div>
          <div id="minBtn"><a data-text="─" ></a></div>
        </div>
    <script src="./renderer.js"></script>
  </body>
</html>

main.js

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

function createWindow () {   const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,   })

  mainWindow.loadFile('index.html') }

app.whenReady().then(() => {   createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()   }) })

renderer.js

// close app
function closeApp(e) {
  e.preventDefault();
  app.quit();
}

document.getElementById("closeBtn").addEventListener("click", closeApp);

What I want is to click on the button with the id "closeBtn" to close the app, I was looking for it, but I just can't make it working. Can anyone please help?

Share Improve this question asked Dec 7, 2021 at 19:10 joojnjoojn 891 silver badge7 bronze badges 3
  • 1 so just to make sure.. window.close() doesn't work? – The Bomb Squad Commented Dec 7, 2021 at 21:59
  • Oh, it works, but I still need to make minimize and maximize buttons, so.. – joojn Commented Dec 7, 2021 at 22:12
  • but your question was answered.. you're wele >:D – The Bomb Squad Commented Dec 7, 2021 at 22:13
Add a ment  | 

1 Answer 1

Reset to default 5

Try using ipcRenderer to send the close mand to main.js

In your main.js:

ipcMain.on('close', () => {
  app.quit()
})

Then, in your renderer.js:

const ipc = require('electron').ipcRenderer

// close app
function closeApp(e) {
  e.preventDefault()
  ipc.send('close')
}

document.getElementById("closeBtn").addEventListener("click", closeApp);

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744224892a4563958.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信