BrowserWindow

您所在的位置：网站首页 › 打开模态窗口怎么设置密码保护 › BrowserWindow

BrowserWindow

2024-07-10 15:27| 来源: 网络整理| 查看: 265

BrowserWindow

创建并控制浏览器窗口。

进程：主进程

在 app 模块 emitted ready 事件之前，您不能使用此模块。

// 在主进程中.const { BrowserWindow } = require('electron')const win = new BrowserWindow({ width: 800, height: 600 })// Load a remote URLwin.loadURL('https://github.com')// Or load a local HTML filewin.loadFile('index.html') 自定义窗口

BrowserWindow 类暴露了各种方法来修改应用窗口的外观和行为。详细信息，请参阅窗口自定义教程。

优雅地显示窗口

每次加载页面都是直接展示，用户突然就看到了，这不是一个好的本地应用使用体验要使窗口显示时没有视觉闪烁，对于不同情况有两种解决方案。

使用 ready-to-show 事件

在加载页面时，渲染进程第一次完成绘制时，如果窗口还没有被显示，渲染进程会发出 ready-to-show 事件。在此事件后显示窗口将没有视觉闪烁：

const { BrowserWindow } = require('electron')const win = new BrowserWindow({ show: false })win.once('ready-to-show', () => { win.show()})

这个事件通常在 did-finish-load 事件之后发出，但是页面有许多远程资源时，它可能会在 did-finish-load之前发出事件。

请注意，使用此事件意味着渲染器会被认为是"可见的"并绘制，即使 show 是false。如果您使用 paintWhenInitiallyHidden: false，此事件将永远不会被触发。

设置 backgroundColor 属性

对于一个复杂的应用，ready-to-show 可能发出的太晚，会让应用感觉缓慢。在这种情况下，建议立刻显示窗口，并使用接近应用程序背景的 backgroundColor

const { BrowserWindow } = require('electron')const win = new BrowserWindow({ backgroundColor: '#2e2c29' })win.loadURL('https://github.com')

请注意，即使对于使用 ready-to-show 事件的应用，仍建议设置 backgroundColor，以使应用感觉更接近原生。

一些包括 backgroundColor 的有效值的例子：

const win = new BrowserWindow()win.setBackgroundColor('hsl(230, 100%, 50%)')win.setBackgroundColor('rgb(255, 145, 145)')win.setBackgroundColor('#ff00a3')win.setBackgroundColor('blueviolet')

有关这些颜色类型的有效选项，请参阅 win.setBackgroundColor。

父子窗口

通过使用 parent 选项，你可以创建子窗口：

const { BrowserWindow } = require('electron')const top = new BrowserWindow()const child = new BrowserWindow({ parent: top })child.show()top.show()

child 窗口将总是显示在 top 窗口的顶部.

模态窗口

模态窗口是禁用父窗口的子窗口。要创建模态窗口，必须同时设置parent和modal属性：

const { BrowserWindow } = require('electron')const top = new BrowserWindow()const child = new BrowserWindow({ parent: top, modal: true, show: false })child.loadURL('https://github.com')child.once('ready-to-show', () => { child.show()}) 页面可见性

页面可见性 API 的工作方式如下:

在所有平台上, 可见性状态与窗口是否隐藏/最小化相关。此外, 在 macOS 上, 可见性状态还会跟踪窗口的遮挡状态。如果窗口被另一个窗口完全遮挡了，可见性状态为hidden. 在其他平台上，可见性状态只有在使用 win.hide()使窗口最小化或者隐藏时才为 hidden 如果创建BrowserWindow 时带有 show: false的参数, 最初的可见性状态将为visible 尽管窗口实际上是隐藏的。如果backgroundThrottling被禁用，可见性状态将保持为visible 即使窗口被最小

【本文地址】

BrowserWindow

BrowserWindow

今日新闻

推荐新闻