Electron BrowserWindow 是 Electron 应用程序的主要组件,它是一个框架,可以在其中加载 HTML、CSS 和 JavaScript。它可以让你创建一个浏览器窗口,用来显示你的应用程序的内容。
BrowserWindow 是 Electron 中最重要的 API 之一,它可以帮助你创建一个浏览器窗口,并在其中加载 HTML、CSS 和 JavaScript。BrowserWindow 的 API 非常强大,可以帮助你控制浏览器窗口的大小、位置、标题栏、工具栏、背景颜色、图标等。
BrowserWindow 还支持多个浏览器窗口,这意味着你可以在同一个应用中打开多个浏览器窗口,并在不同的浏览器窗口中显示不同的内容。此外,BrowserWindow 还支持多标签页(tabs),这使得你能够在同一个浏览器窗口中打开多个标签页来显示不同的内容。
BrowserWindow 还有很多高级特性:例如对 WebGL 的支持、对 GPU 硬件加速的支持、对 Chromium DevTools 的集成、对 Node.js 的集成以及对原生 GUI 控件的集成。这些特性使得 BrowserWindow 更加强大而有用。
const { BrowserWindow } = require('electron') let win = new BrowserWindow({ width: 800, height: 600 }) win.loadURL('https://github.com')
BrowserWindow 类让你有创建一个浏览器窗口的权力。例如:
// In the main process. const BrowserWindow = require('electron').BrowserWindow; // Or in the renderer process. const BrowserWindow = require('electron').remote.BrowserWindow; var win = new BrowserWindow({ width: 800, height: 600, show: false }); win.on('closed', function() { win = null; }); win.loadURL('https://github.com'); win.show();
你也可以不通过chrome创建窗口,使用 Frameless Window API.
BrowserWindow 是一个 EventEmitter.
通过 options 可以创建一个具有本质属性的 BrowserWindow 。
type 的值和效果不同平台展示效果不同,具体:
titleBarStyle 只在 OS X 10.10 Yosemite 或更新版本上支持,可用值:
webPreferences 参数是个对象,它的属性:
BrowserWindow 对象可触发下列事件:
注意: 一些事件只能在特定os环境中触发,已经尽可能地标出.
返回:
当文档改变标题时触发,使用 event.preventDefault() 可以阻止原窗口的标题改变.
返回:
在窗口要关闭的时候触发. 它在DOM的 beforeunload and unload 事件之前触发.使用 event.preventDefault() 可以取消这个操作
通常你想通过 beforeunload 处理器来决定是否关闭窗口,但是它也会在窗口重载的时候被触发。在 Electron 中,返回一个空的字符串或 false 可以取消关闭.例如:
window.onbeforeunload = function(e) { console.log('I do not want to be closed'); // Unlike usual browsers, in which a string should be returned and the user is // prompted to confirm the page unload, Electron gives developers more options. // Returning empty string or false would prevent the unloading now. // You can also use the dialog API to let the user confirm closing the application. e.returnValue = false; };
当窗口已经关闭的时候触发.当你接收到这个事件的时候,你应当删除对已经关闭的窗口的引用对象和避免再次使用它.
在界面卡死的时候触发事件.
在界面恢复卡死的时候触发.
在窗口失去焦点的时候触发.
在窗口获得焦点的时候触发.
在窗口最大化的时候触发.
在窗口退出最大化的时候触发.
在窗口最小化的时候触发.
在窗口从最小化恢复的时候触发.
在窗口size改变的时候触发.
在窗口移动的时候触发.
注意:在 OS X 中别名为 moved.
在窗口移动的时候触发.
在的窗口进入全屏状态时候触发.
在的窗口退出全屏状态时候触发.
在的窗口通过 html api 进入全屏状态时候触发.
在的窗口通过 html api 退出全屏状态时候触发.
在请求一个App Command.aspx)的时候触发. 典型的是键盘媒体或浏览器命令, Windows上的 "Back" 按钮用作鼠标也会触发.
someWindow.on('app-command', function(e, cmd) { // Navigate the window back when the user hits their mouse back button if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) { someWindow.webContents.goBack(); } });
在滚动条事件开始的时候触发.
在滚动条事件结束的时候触发.
BrowserWindow 对象有如下方法:
返回一个所有已经打开了窗口的对象数组.
返回应用当前获得焦点窗口,如果没有就返回 null.
根据 webContents 查找窗口.
根据 id 查找窗口.
添加位于 path 的开发者工具栏扩展,并且返回扩展项的名字.
这个扩展会被添加到历史,所以只需要使用这个API一次,这个api不可用作编程使用.
删除开发者工具栏名为 name 的扩展.
使用 new BrowserWindow 创建的实例对象,有如下属性:
// In this example `win` is our instance var win = new BrowserWindow({ width: 800, height: 600 });
这个窗口的 WebContents 对象,所有与界面相关的事件和方法都通过它完成的.
查看 webContents documentation 的方法和事件.
窗口的唯一id.
使用 new BrowserWindow 创建的实例对象,有如下方法:
注意: 一些方法只能在特定os环境中调用,已经尽可能地标出.
强制关闭窗口, unload and beforeunload 不会触发,并且 close 也不会触发, 但是它保证了 closed 触发.
尝试关闭窗口,这与用户点击关闭按钮的效果一样. 虽然网页可能会取消关闭,查看 close event.
窗口获得焦点.
返回 boolean, 窗口是否获得焦点.
展示并且使窗口获得焦点.
展示窗口但是不获得焦点.
隐藏窗口.
返回 boolean, 窗口是否可见.
窗口最大化.
取消窗口最大化.
返回 boolean, 窗口是否最大化.
窗口最小化. 在一些os中,它将在dock中显示.
将最小化的窗口恢复为之前的状态.
返回 boolean, 窗口是否最小化.
设置是否全屏.
返回 boolean, 窗口是否全屏化.
由一个窗口来维持高宽比值. extraSize 允许开发者使用它,它的单位为像素,不包含在 aspectRatio 中.这个 API 可用来区分窗口的size和内容的size .
想象一个普通可控的HD video 播放器窗口. 假如左边缘有15控制像素,右边缘有25控制像素,在播放器下面有50控制像素.为了在播放器内保持一个 16:9 的高宽比例,我们可以调用这个api传入参数16/9 and [ 40, 50 ].第二个参数不管网页中的额外的宽度和高度在什么位置,只要它们存在就行.只需要把网页中的所有额外的高度和宽度加起来就行.
重新设置窗口的宽高值,并且移动到指定的 x, y 位置.
返回一个对象,它包含了窗口的宽,高,x坐标,y坐标.
重新设置窗口的宽高值.
返回一个数组,它包含了窗口的宽,高.
重新设置窗口客户端的宽高值(例如网页界面).
返回一个数组,它包含了窗口客户端的宽,高.
设置窗口最小化的宽高值.
返回一个数组,它包含了窗口最小化的宽,高.
设置窗口最大化的宽高值.
返回一个数组,它包含了窗口最大化的宽,高.
设置窗口是否可以被用户改变size.
返回 boolean,窗口是否可以被用户改变size.
设置窗口是否可以被用户拖动. Linux 无效.
返回 boolean,窗口是否可以被用户拖动. Linux 总是返回 true.
设置窗口是否可以最小化. Linux 无效.
返回 boolean,窗口是否可以最小化. Linux 总是返回 true.
设置窗口是否可以最大化. Linux 无效.
返回 boolean,窗口是否可以最大化. Linux 总是返回 true.
设置点击最大化按钮是否可以全屏或最大化窗口.
返回 boolean,点击最大化按钮是否可以全屏或最大化窗口.
设置窗口是否可以人为关闭. Linux 无效.
返回 boolean,窗口是否可以人为关闭. Linux 总是返回 true.
是否设置这个窗口始终在其他窗口之上.设置之后,这个窗口仍然是一个普通的窗口,不是一个不可以获得焦点的工具箱窗口.
返回 boolean,当前窗口是否始终在其它窗口之前.
窗口居中.
移动窗口到对应的 x and y 坐标.
返回一个包含当前窗口位置的数组.
改变原窗口的title.
返回原窗口的title.
注意: 界面title可能和窗口title不相同.
开始或停止显示窗口来获得用户的关注.
让窗口不在任务栏中显示.
进入或离开 kiosk 模式.
返回 boolean,是否进入或离开 kiosk 模式.
以 Buffer 形式返回这个具体平台的窗口的句柄.
windows上句柄类型为 HWND ,OS X NSView* , Linux Window.
拦截windows 消息,在 WndProc 接收到消息时触发 callback函数.
返回 true or false 来代表是否拦截到消息.
不拦截窗口消息.
窗口消息全部不拦截.
设置窗口当前文件路径,并且将这个文件的图标放在窗口标题栏上.
获取窗口当前文件路径.
明确指出窗口文档是否可以编辑,如果可以编辑则将标题栏的图标变成灰色.
返回 boolean,当前窗口文档是否可编辑.
捕获 rect 中的page 的快照.完成后将调用回调函数 callback 并返回 image . image 是存储了快照信息的NativeImage实例.如果不设置 rect 则将捕获所有可见page.
类似 webContents.print([options])
类似 webContents.printToPDF(options, callback)
类似 webContents.loadURL(url[, options]).
类似 webContents.reload.
设置菜单栏的 menu ,设置它为 null 则表示不设置菜单栏.
在进度条中设置进度值,有效范围 [0, 1.0].
当进度小于0时则不显示进度; 当进度大于0时显示结果不确定.
在libux上,只支持Unity桌面环境,需要指明 *.desktop 文件并且在 package.json 中添加文件名字.默认它为 app.getName().desktop.
向当前任务栏添加一个 16 x 16 像素的图标,通常用来覆盖一些应用的状态,或者直接来提示用户.
设置窗口是否应该有阴影.在Windows和Linux系统无效.
返回 boolean,设置窗口是否有阴影.在Windows和Linux系统始终返回 true.
在窗口的任务栏button布局出为缩略图添加一个有特殊button的缩略图工具栏. 返回一个 Boolean 对象来指示是否成功添加这个缩略图工具栏.
因为空间有限,缩略图工具栏上的 button 数量不应该超过7个.一旦设置了,由于平台限制,就不能移动它了.但是你可使用一个空数组来调用api来清除 buttons .
所有 buttons 是一个 Button 对象数组:
flags 是一个数组,它包含下面这些 Strings:
在界面查找选中文字时显示弹出字典.
设置窗口的菜单栏是否可以自动隐藏. 一旦设置了,只有当用户按下 Alt 键时则显示.
如果菜单栏已经可见,调用 setAutoHideMenuBar(true) 则不会立刻隐藏.
返回 boolean,窗口的菜单栏是否可以自动隐藏.
设置菜单栏是否可见.如果菜单栏自动隐藏,用户仍然可以按下 Alt 键来显示.
返回 boolean,菜单栏是否可见.
设置窗口是否在所有地方都可见.
注意: 这个api 在windows无效.
返回 boolean,窗口是否在所有地方都可见.
注意: 在 windows上始终返回 false.
忽略窗口的所有鼠标事件.
动态图表使用x和y轴显示数据,通过显示定义空间内数据点的移动以及线颜色的变化来显示随时间的变化。动态图的主要优点是查看数据...
运算符是一个符号,通知编译器执行特定的数学或逻辑操作。Tableau 有多个运算符用于创建计算字段和公式。可用的运算符的详细信息...
跳转到class、id、js方法定义处按下Alt,左键点击引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用...
HBuilder代码块大量减少重复代码工作量在打开的getstart.html中输入H,如下图然后按下8,自动生成HTML的基本代码如下图什么是代码...