如何在 Electron Js 中的弹出窗口中激活按钮?

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

Electron JS 弹出按钮问题:通过 IPC 通信解决 DOM 访问错误

您在 Electron JS 中遇到的弹出按钮问题可能是由于尝试访问其他窗口的 DOM 造成的。Electron 的进程模型限制了对另一个窗口的 DOM 的直接访问。

为了解决这个问题,你可以使用 Electron 的进程间通信(IPC)机制。你可以这样修改代码:

renderer.js

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

document.addEventListener('DOMContentLoaded', () => {
   const mainButton = document.getElementById('main');
   mainButton.addEventListener('click', async () => {
      console.log("Clicked main button!!");
      ipcRenderer.send('open-popup');
   });
});

// Listen for a message from the main process
ipcRenderer.on('popup-button-clicked', () => {
   console.log("Clicked popup button in popup window!!");
});

main.js

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

let popupWindow;

ipcMain.on('open-popup', (event) => {
   popupWindow = new BrowserWindow({
      width: 500,
      height: 400
   });
   popupWindow.loadFile('renderer/popup.html');

   // Send a message to the popup window when it's ready
   popupWindow.webContents.on('dom-ready', () => {
      popupWindow.webContents.send('popup-ready');
   });
});

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Popup Window</title>
</head>
<body>
  <button id="popup">Popup Button</button>

  <script>
    const { ipcRenderer } = require('electron');

    document.addEventListener('DOMContentLoaded', () => {
      const popupButton = document.getElementById('popup');
      popupButton.addEventListener('click', () => {
        console.log("Clicked popup button in popup window!!");
        ipcRenderer.send('popup-button-clicked');
      });
    });
  </script>
</body>
</html>

此修改使用 IPC 在主进程和渲染进程之间进行通信。当弹窗就绪时,它会向主进程发送一条消息,主进程进而通知渲染进程启用与弹窗按钮的交互。

我有一个 Electron JS 项目。有两个按钮,一个在 index.html 中(用于主页),另一个在 popup.html 中(用于弹出窗口)。index.html 中的按钮没有问题。但是,我无法点击弹出窗口中的按钮。要打开弹出窗口,请先点击主页上的按钮。打开弹出窗口后,在弹出窗口中监听按钮。

 
答案2
 

Electron 对话框模块:文件选择、保存和用户交互示例

要显示用于打开和保存文件以及其他警报的本机系统对话框,您可以使用dialogElectron 中的模块。以下是显示用于选择多个文件的对话框的示例:

const {
   dialog
} = require('electron');
console.log(dialog.showOpenDialog({
   properties: ['openFile', 'multiSelections']
}));

dialog模块提供了各种方法:

  1. showOpenDialogSync(选项):

    • 同步打开一个用于选择文件或目录的对话框。
    • 返回所选文件路径的数组或undefined是否取消对话框。
  2. 显示打开对话框([browserWindow,]选项):

    • 异步打开一个用于选择文件或目录的对话框。
    • 返回一个 Promise,其中包含有关所选文件的信息的对象,包括对话框是否被取消。
  3. 显示SaveDialogSync(选项):

    • 同步打开一个用于保存文件的对话框。
    • 返回保存的文件的路径或者undefined对话框是否被取消。
  4. 显示保存对话框([browserWindow,]选项):

    • 异步打开一个用于保存文件的对话框。
    • 返回一个 Promise,其中包含有关已保存文件的信息的对象,包括对话框是否被取消。

这些方法接受各种选项,例如title,,,,和,允许您自定义对话框的行为。defaultPathbuttonLabelfiltersproperties

例如,要显示打开文件和选择目录的对话框,您可以使用:

dialog.showOpenDialogSync(mainWindow, {
   properties: ['openFile', 'openDirectory']
});

对于使用 Promise 的异步用法:

dialog.showOpenDialog(mainWindow, {
      properties: ['openFile', 'openDirectory']
   })
   .then(result => {
      console.log(result.canceled);
      console.log(result.filePaths);
   })
   .catch(err => {
      console.log(err);
   });

如果您想限制文件类型,请记住自定义过滤器数组,并注意在 Windows 和 Linux 上,打开的对话框不能同时作为文件选择器和目录选择器。

请随意探索显示消息框、错误框和证书信任对话框的其他方法,如所提供的文档中所述。

显示用于打开和保存文件、警报等的本机系统对话框。过滤器指定可显示的文件类型数组,例如 dialog.showOpenDialog。

 
答案3
 

Electron 窗口自定义指南

Electron 中的窗口自定义功能允许您更改应用程序浏览器窗口的外观和行为。您可以实现各种自定义选项,例如创建无框窗口、自定义标题栏、控制交通信号灯、创建透明窗口、制作点击窗口以及定义可拖动区域。

  1. 无框窗口: 要创建无框窗口(没有浏览器边框的窗口),请在构造函数中将frame属性设置为。falseBrowserWindow

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow({
       frame: false
    });
  2. 自定义标题栏样式:titleBarStyle您可以使用构造函数中的选项 自定义标题栏样式BrowserWindow。例如,要隐藏标题栏,您可以使用样式'hidden'

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow({
       titleBarStyle: 'hidden'
    });
  3. 控制交通灯: 在 macOS 上,您可以通过指定不同的标题栏样式来控制交通灯(窗口控件)。例如,使用'customButtonsOnHover'样式会隐藏它们,直到您将鼠标悬停在它们上面。

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow({
       titleBarStyle: 'customButtonsOnHover'
    });
  4. 自定义交通灯位置: 要修改交通灯窗口控件的位置,您可以使用样式'hiddenInset'将其位置移动固定量。为了更精确的控制,您可以使用选项传递坐标trafficLightPosition

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow({
       titleBarStyle: 'hiddenInset'
    });
  5. 以编程方式显示/隐藏交通灯: 您可以使用 以编程方式显示或隐藏主进程中的交通灯win.setWindowButtonVisibility()

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow();
    win.setWindowButtonVisibility(false); // hides the traffic lights
  6. 窗口控件覆盖(macOS 和 Windows): 窗口控件覆盖 API 允许您在桌面上安装时自定义标题栏区域。您可以使用构造函数titleBarOverlay中的选项启用它BrowserWindow

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow({
       titleBarStyle: 'hidden',
       titleBarOverlay: true
    });

    您还可以指定覆盖的属性,例如颜色和高度,以实现更多自定义。

  7. 透明窗口: 要创建完全透明的窗口,请在构造函数中将transparent选项设置为。trueBrowserWindow

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow({
       transparent: true
    });

    请注意,透明窗口存在局限性,包括无法点击它们。

  8. 点击式窗口: 您可以使用 API 让窗口忽略所有鼠标事件win.setIgnoreMouseEvents(ignore)。您还可以根据需要有选择地转发鼠标事件。

    const {
       BrowserWindow
    } = require('electron');
    const win = new BrowserWindow();
    win.setIgnoreMouseEvents(true);
  9. 自定义可拖动区域: 使用-webkit-app-region: dragCSS 在应用程序中指定可拖动区域。您还可以使用 将区域标记为不可拖动-webkit-app-region: no-drag

    body {
       -webkit - app - region: drag;
    }
    
    button {
       -webkit - app - region: no - drag;
    }
  10. 文本选择和上下文菜单提示: 创建可拖动区域时,请注意文本选择冲突和上下文菜单。使用-webkit-user-select: none;可拖动区域中的文本选择功能禁用文本选择,并避免在可拖动区域上使用自定义上下文菜单,以实现一致的行为。

.titlebar {
   -webkit - user - select: none; -
   webkit - app - region: drag;
}

这些自定义选项可让您对 Electron 应用程序窗口的外观和行为进行细粒度控制。您可以参考提供的链接了解有关特定 API 和 CSS 环境变量的更多详细信息。

BrowserWindow 模块是 Electron 应用程序的基础,它公开了许多可以更改浏览器窗口外观和行为的 API。在本教程中,我们将介绍 macOS、Windows 和 Linux 上窗口自定义的各种用例。要创建无框窗口,您需要在 BrowserWindow 构造函数中将 frame 设置为 false。忽略鼠标消息会使 Web 内容不受鼠标移动的影响,这意味着不会发出鼠标移动事件

 
答案4
 

#使用 Electron 构建跨平台桌面应用程序:初学者指南 | Cubettech

Electron 新手指南

什么是 Electron?

Electron 是一个使用 JavaScript、HTML 和 CSS 创建跨平台桌面应用程序的框架。利用 nodejs 和 chromium,Electron 可以轻松开发和支持跨各种平台的桌面应用程序。

入门:先决条件

假设您已安装 Windows、Linux 或 macOS(最好是 64 位)和 npm/nodejs。创建一个根目录和三个基本文件:package.jsonmain.jsindex.html

配置package.json

添加以下内容到package.json

{
  "name": "MyDeskApp",
  "version": "0.0.1",
  "description": "My first desktop app",
  "main": "app/main.js",
  "author": "Vishal <vishal@cubettech.com>",
  "license": "CC0-1.0",
  "scripts": {
    "start": "./node_modules/.bin/electron ."
  }
}

该文件包含应用程序详细信息、依赖项以及运行应用程序的快捷命令。

安装 Electron

在根目录中运行以下命令:

npm install electron--save - dev
npm install electron - g

安装后,检查package.json下是否添加了行devDependencies

编码main.js

添加以下代码到main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');

let mainWindow;

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

function createWindow() {
   mainWindow = new BrowserWindow({
      width: 1024,
      height: 600,
      frame: true,
      webPreferences: {
         webSecurity: false,
         plugins: true
      }
   });

   mainWindow.webContents.openDevTools();

   mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }));

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

这将为 Electron 应用程序设置主进程。

创建index.html

将以下代码粘贴到index.html

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
  <title>My desk app 0.0.1</title>
</head>
<body>
  <main class="content-wraper" id="content-wraper">
    <div class="content-blk">Hello.. This is my first desktop app</div>
  </main>
  <script>
    if (typeof module === 'object') { window.module = module; module = undefined; }
  </script>
  <script>
    if (window.module) module = window.module;
  </script>
  <script type="text/javascript">
    <!-- insert the js scripts -->
  </script>
</body>
</html>

这是用于在 Electron 应用程序中渲染的基本 HTML 文件。

运行应用程序

npm start在命令提示符/终端中执行以启动您的第一个桌面应用程序。

了解主进程和渲染进程

在 Electron 中,主进程负责处理应用初始化,而渲染进程负责处理 UI。它们之间使用 IPC(进程间通信)模块(如ipcMain和)进行通信ipcRenderer

沟通示例:

修改index.html按钮main.js点击事件:

// In index.html
const ipcRenderer = require('electron').ipcRenderer;
const btnclick = document.getElementById('loadnewwindow');

btnclick.addEventListener('click', function() {
   var arg = "secondparam";
   ipcRenderer.send("btnclick", arg);
});
// In main.js
const {
   ipcMain,
   BrowserWindow
} = require('electron');

ipcMain.on("btnclick", function(event, arg) {
   var newWindow = new BrowserWindow({
      width: 450,
      height: 300,
      show: false,
      webPreferences: {
         webSecurity: false,
         plugins: true,
         nodeIntegration: false
      }
   });

   var facebookURL = "https://www.facebook.com";
   newWindow.loadURL(facebookURL);

   newWindow.show();
   event.sender.send("btnclick-task-finished", "yes");
});

这演示了主进程和渲染进程之间的通信。

简化通信的远程模块

Electron 引入了 ‘remote’ 模块来简化进程间通信。例如:

// In index.html
const remote = require('electron').remote;
const homeButton = document.getElementById("home");

homeButton.onclick = function() {
   var mainWindow = remote.getCurrentWindow();
   mainWindow.loadURL('file://' + __dirname + '/home.ejs');
};

这些基础知识为进一步探索 Electron 提供了垫脚石,包括加载更多进程、使用原生节点模块、设置本地数据库和打包应用程序以进行分发等主题。

mainWindow.loadURL 将在我们刚刚创建的新浏览器窗口中加载我们的 index.html。现在让我们考虑一个案例。我们需要在单击 index.html 中的按钮时在主窗口中创建一个新的弹出窗口。我们知道我们需要“BrowserWindow”事件来创建新窗口。BrowserWindow 仅在主进程中起作用。我们的按钮单击来自 index.html(渲染进程)。那么我们如何在单击渲染进程中的按钮时在主进程中创建一个新窗口。

    温馨提示:本文最后更新于2024-05-31 10:05:25,某些文章具有时效性,若有错误或已失效,请在下方留言
    ©版权声明
    感谢您的阅读
    喜欢就支持一下吧
    点赞13赞赏 分享
    评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    夸夸
    还有吗!没看够!
    取消
    昵称表情代码图片

      暂无评论内容