24 KiB
BrowserWindow
A classe BrowserWindow lhe dá a habilidade de criar uma janela do browser. Por exemplo:
const BrowserWindow = require('electron').BrowserWindow;
var win = new BrowserWindow({ width: 800, height: 600, show: false });
win.on('closed', function() {
win = null;
});
win.loadURL('https://github.com');
win.show();
Você também pode criar uma janela sem o chrome utilizando a API Frameless Window.
Classe: BrowserWindow
BrowserWindow é um EventEmitter.
Ela cria uma nova BrowserWindow com propriedades nativas definidas pelo options.
new BrowserWindow([options])
options Objeto (opcional), propriedades:
widthInteger - Largura da janela em pixels. O padrão é800.heightInteger - Altura da janela em pixels. O padrão é600.xInteger - Deslocamento da janela da esquerda da tela. O padrão é centralizar a janela.yInteger - Deslocamento da janela do topo da tela. O padrão é centralizar a janela.useContentSizeBoolean -widtheheightseriam utilizados como o tamanho da página web, o que significa que o tamanho real da janela irá incluir o tamanho da moldura da janela e será um pouco maior. O padrão éfalse.centerBoolean - Mostra a janela no centro da tela.minWidthInteger - Largura mínima da janela. O padrão é0.minHeightInteger - Altura mínima da janela. O padrão é0.maxWidthInteger - Largura máxima da janela. O padrão é sem limites.maxHeightInteger - Altura máxima da janela. O padrão é sem limites.resizableBoolean - Se é possível modificar o tamanho da janela. O padrão étrue.alwaysOnTopBoolean - Se a janela deve sempre ficar à frente de outras janelas. O padrão éfalse.fullscreenBoolean - Se a janela deve estar em tela cheia. Quando definido comofalse, o botão de tela cheia estará escondido ou desabilitado no macOS. O padrão éfalse.skipTaskbarBoolean - Se deve mostrar a janela na barra de tarefas. O padrão éfalse.kioskBoolean - Modo kiosk. O padrão éfalse.titleString - Título padrão da janela. O padrão é"Electron".iconNativeImage - O ícone da janela, quando omitido no Windows, o ícone do executável é utilizado como o ícone da janela.showBoolean - Se a janela deve ser exibida quando criada. O padrão étrue.frameBoolean - Defina comofalsepara criar uma Frameless Window. O padrão étrue.acceptFirstMouseBoolean - Se o web view aceita um evento mouse-down que ativa a janela simultaneamente. O padrão éfalse.disableAutoHideCursorBoolean - Se deve esconder o cursor quando estiver digitando. O padrão éfalse.autoHideMenuBarBoolean - Esconde a barra de menu automaticamente, a não ser que a teclaAltseja pressionada. O padrão éfalse.enableLargerThanScreenBoolean - Possibilita que o tamanho da janela seja maior que a tela. O padrão éfalse.backgroundColorString - Cor de fundo da janela em hexadecimal, como#66CD00ou#FFF. Só é implementado no Linux e Windows. O padrão é#000(preto).darkThemeBoolean - Força a utilização do tema dark na janela, só funciona em alguns ambientes de desktop GTK+3. O padrão éfalse.transparentBoolean - Torna a janela transparente. O padrão éfalse.typeString - Define o tipo da janela, que aplica propriedades adicionais específicas da plataforma. Por padrão é indefinido e será criada uma janela de aplicativo comum. Possíveis valores:- No Linux, os tipos possíveis são
desktop,dock,toolbar,splash,notification. - No macOS, os tipos possíveis são
desktop,textured. O tipotexturedadiciona a aparência degradê metálica (NSTexturedBackgroundWindowMask). O tipodesktopcoloca a janela no nível do fundo de tela do desktop (kCGDesktopWindowLevel - 1). Note que a janeladesktopnão irá receber foco, eventos de teclado ou mouse, mas você pode usarglobalShortcutpara receber entrada de dados ocasionalmente.
- No Linux, os tipos possíveis são
titleBarStyleString, macOS - Define o estilo da barra de título da janela. Esta opção está suportada a partir da versão macOS 10.10 Yosemite. Há três possíveis valores:defaultou não definido, resulta na barra de título cinza opaca padrão do Mac.hiddenresulta numa barra de título oculta e a janela de conteúdo no tamanho máximo, porém a barra de título ainda possui os controles padrões de janela ("semáforo") no canto superior esquerdo.hidden-insetresulta numa barra de título oculta com uma aparência alternativa onde os botões de semáforo estão ligeiramente mais longe do canto da janela.
webPreferencesObject - Configurações das características da página web, propriedades:nodeIntegrationBoolean - Se a integração com node está habilitada. O padrão étrue.preloadString - Define um script que será carregado antes que outros scripts rodem na página. Este script sempre terá acesso às APIs do node, não importa senodeIntegrationesteja habilitada ou não. O valor deve ser o endereço absoluto do scriot. QuandonodeIntegrationnão está habilitada, o scriptpreloadpode reintroduzir símbolos globais Node de volta ao escopo global. Veja um exemplo aqui.partitionString - Define a sessão utilizada pela página. Separtitioncomeça compersist:, a página irá utilizar uma sessão persistente disponível para todas as páginas do aplicativo com a mesmapartition. Se não houver o prefixopersist:, a página irá utilizar uma sessão em memória. Ao utilizar a mesmapartition, várias páginas podem compartilhar a mesma sessão. Se apartitionfor indefinida, então a sessão padrão do aplicativo será utilizada.zoomFactorNumber - O fator de zoom da página,3.0representa300%. O padrão é1.0.javascriptBoolean - Habilita suporte à JavaScript. O padrão étrue.webSecurityBoolean - Quando definido comofalse, irá desabilitar a política de mesma origem (Geralmente usando sites de teste por pessoas), e definirallowDisplayingInsecureContenteallowRunningInsecureContentcomotruese estas duas opções não tiverem sido definidas pelo usuário. O padrão étrue.allowDisplayingInsecureContentBoolean - Permite que uma página https exiba conteúdo como imagens de URLs http. O padrão éfalse.allowRunningInsecureContentBoolean - Permite que uma página https rode JavaScript, CSS ou plugins de URLs http. O padrão éfalse.imagesBoolean - Habilita suporte a imagens. O padrão étrue.javaBoolean - Habilita suporte a Java. O padrão éfalse.textAreasAreResizableBoolean - Faz com que os elementos TextArea elements tenham tamanho variável. O padrão étrue.webglBoolean - Habiltia suporte a WebGL. O padrão étrue.webaudioBoolean - Habilita suporte a WebAudio. O padrão étrue.pluginsBoolean - Se plugins devem ser habilitados. O padrão éfalse.experimentalFeaturesBoolean - Habilita as características experimentais do Chromium. O padrão éfalse.experimentalCanvasFeaturesBoolean - Habilita as características experimentais de canvas do Chromium. O padrão éfalse.overlayScrollbarsBoolean - Habilita sobreposição das barras de rolagem. O padrão éfalse.overlayFullscreenVideoBoolean - Habilita sobreposição do vídeo em tela cheia. O padrão éfalse.sharedWorkerBoolean - Habilita suporte a Shared Worker. O padrão éfalse.directWriteBoolean - Habilita o sistema de renderização de fontes DirectWrite no Windows. O padrão étrue.pageVisibilityBoolean - A página é forçada a permanecer visível ou oculta quando definido, em vez de refletir a visibilidade atual da janela. Usuários podem definir comotruepara evitar que os temporizadores do DOM sejam suprimidos. O padrão éfalse.
Eventos
O objeto BrowserWindow emite os seguintes eventos:
Nota: Alguns eventos só estão disponíveis em sistemas operacionais específicos e estão rotulados como tal.
Evento: 'page-title-updated'
Retorna:
eventEvento
Emitido quando o documento muda seu título, chamar event.preventDefault() previne que o título nativo da janela mude.
Evento: 'close'
Retorna:
eventEvento
Emitido quando a janela for fechar. É emitido antes dos eventos beforeunload e unload do DOM. Chamar event.preventDefault() cancela o fechamento.
Normalmente você utiliza o manipulador de eventos do beforeunload para decidir se a janela deve ser fechada, que também será chamado quando a janela é recarregada. No Electron, retornar uma string vazia ou false cancela o fechamento. Por exemplo:
window.onbeforeunload = function(e) {
console.log('Não quero ser fechada');
// Diferente de navegadores comuns, nos quais uma string deve ser retornada e
// o usuário deve confirmar se a janela será fechada, o Electron dá mais opções
// aos desenvolvedores. Retornar uma string vazia ou false cancela o fechamento.
// Você também pode usar a API de diálogo para deixar que o usuário confirme o
// fechamento do aplicativo.
e.returnValue = false;
};
Evento: 'closed'
Emitido quando a janela é fechada. Após você ter recebido este evento, você deve remover a referência da janela e evitar utilizá-la.
Evento: 'unresponsive'
Emitido quando a página web para de responder.
Evento: 'responsive'
Emitido quando a página web que não respondia volta a responder novamente.
Evento: 'blur'
Emitido quando a janela perde foco.
Evento: 'focus'
Emitido quando a janela ganha foco.
Evento: 'maximize'
Emitido quando a janela é maximizada.
Evento: 'unmaximize'
Emitido quando a janela sai do estado maximizado.
Evento: 'minimize'
Emitido quando a janela é minimizada.
Evento: 'restore'
Emitido quando a janela é restaurada do estado minimizado.
Evento: 'resize'
Emitido quando o tamanho da janela está sendo alterado.
Evento: 'move'
Emitido quando está sendo movida para uma nova posição.
Note: No macOS este evento é apenas um apelido de moved.
Evento: 'moved' macOS
Emitido uma vez quando a janela é movida para uma nova posição.
Evento: 'enter-full-screen'
Emitido quando a janela entra no estado tela cheia.
Evento: 'leave-full-screen'
Emitido quando a janela sai do estado de tela cheia.
Evento: 'enter-html-full-screen'
Emitido quando a janela entra no estado tela cheia, ocasionado por uma api de html.
Evento: 'leave-html-full-screen'
Emitido quando a janela sai do estado de tela cheia, ocasionado por uma api de html.
Evento: 'app-command' Windows
Emitido quando um App Command é invocado. Estes estão tipicamente relacionado às teclas de mídia do teclado, ou comandos do browser, assim como o botão "Voltar" existente em alguns modelos de mouse no Windows.
someWindow.on('app-command', function(e, cmd) {
// Navega a janela 'para trás' quando o usuário pressiona o botão voltar do mouse
if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) {
someWindow.webContents.goBack();
}
});
Métodos
O objeto BrowserWindow possui os seguintes métodos:
BrowserWindow.getAllWindows()
Retorna um array de todas as janelas abertas.
BrowserWindow.getFocusedWindow()
Retorna a janela que está focada no aplicativo.
BrowserWindow.fromWebContents(webContents)
webContentsWebContents
Acha uma janela de acordo com os webContents que ela possui.
BrowserWindow.fromId(id)
idInteger
Acha uma janela de acordo com o seu ID.
BrowserWindow.addDevToolsExtension(path)
pathString
Adiciona a extenção DevTools localizada no endereço path, e retorna o nome da extenção.
A extenção será lembrada, então você só precisa chamar esta API uma vez, esta API não é para uso de programação.
BrowserWindow.removeDevToolsExtension(name)
nameString
Remove a extenção DevTools cujo nome é name.
Propriedades de Instância
Objetos criados com new BrowserWindow possuem as seguintes propriedades:
// Neste exemplo `win` é a nossa instância
var win = new BrowserWindow({ width: 800, height: 600 });
win.webContents
Todas os eventos e operações relacionados à pagina web serão feitos através do objeto WebContents que a esta janela possui.
Veja a documentação do webContents para seus métodos e eventos.
win.id
O ID único desta janela.
Métodos de instância
Objetos criados com new BrowserWindow possuem os seguintes métodos de instância:
Nota: Alguns métodos só estão disponíveis em sistemas operacionais específicos e estão rotulados como tal.
win.destroy()
Força o fechamento da janela, os eventos unload e beforeunload não serão emitidos para a página web, e o evento close também não será emitido para esta janela, mas garante que o evento closed será emitido.
Você só deve utilizar este método quando o processo renderizador (página web) congelar.
win.close()
Tenta fechar a janela, tem o mesmo efeito que o usuário manualmente clicar o botão de fechar a janela. Entretanto, a página web pode cancelar o fechamento, veja o evento close.
win.focus()
Foca na janela.
win.isFocused()
Retorna um boolean, indicando se a janela está com foco.
win.show()
Exibe e dá foco à janela.
win.showInactive()
Exibe a janela, porém não dá foco à ela.
win.hide()
Esconde a janela.
win.isVisible()
Retorna um boolean, indicando se a janela está visível para o usuário.
win.maximize()
Maximiza a janela.
win.unmaximize()
Sai do estado maximizado da janela.
win.isMaximized()
Retorna um boolean, indicando se a janela está maximizada.
win.minimize()
Minimiza a janela. Em algumas plataformas, a janela minimizada será exibida no Dock.
win.restore()
Restaura a janela do estado minimizado para o estado anterior.
win.isMinimized()
Retorna um boolean, indicando se a janela está minimizada.
win.setFullScreen(flag)
flagBoolean
Define se a janela deve estar em modo tela cheia.
win.isFullScreen()
Retorna um boolean, indicando se a janela está em modo tela cheia.
win.setAspectRatio(aspectRatio[, extraSize]) macOS
aspectRatioA proporção que queremos manter para uma porção do conteúdo da view.extraSizeObject (opcional) - O tamanho extra não incluído enquanto a proporção é mantida. Propriedades:widthIntegerheightInteger
Isto fará com que a janela mantenha sua proporção. O extraSize permite que o desenvolvedor tenha espaço, definido em pixels, não incluídos no cálculo da proporção. Esta API já leva em consideração a diferença entre o tamanho da janela e o tamanho de seu conteúdo.
Suponha que exista uma janela normal com um player de vídeo HD e seus controles associados. Talvez tenha 15 pixels de controles na borda esquerda, 25 pixels de controles na borda direita e 50 abaixo do player. Para que seja mantida a proporção de 16:9 (proporção padrão para HD em 1920x1080) no próprio player, nós chamaríamos esta função com os argumentos 16/9 e [ 40, 50 ]. Para o segundo argumento, não interessa onde a largura e altura extras estão no conteúdo da view--apenas que elas existam. Apenas some qualquer área de largura e altura extras que você tem dentro da view do conteúdo.
win.setBounds(options)
options Object, propriedades:
xIntegeryIntegerwidthIntegerheightInteger
Redefine o tamanho e move a janela para width, height, x, y.
win.getBounds()
Retorna um objeto que contém a largura, altura, posição x e y da janela.
win.setSize(width, height)
widthIntegerheightInteger
Redefine o tamanho da janela para largura width e altura height.
win.getSize()
Retorna um array que contém a largura e altura da janela.
win.setContentSize(width, height)
widthIntegerheightInteger
Redefine a área de cliente da janela (a página web) para largura width e altura height.
win.getContentSize()
Retorna um array que contém a largura e altura da área de cliente da janela.
win.setMinimumSize(width, height)
widthIntegerheightInteger
Define o tamanho mínimo da janela para largura width e altura height.
win.getMinimumSize()
Retorna uma array que contém o tamanho mínimo da largura e altura da janela.
win.setMaximumSize(width, height)
widthIntegerheightInteger
Define o tamanho máximo da janela para largura width e altura height.
win.getMaximumSize()
Retorna uma array que contém o tamanho máximo da largura e altura da janela.
win.setResizable(resizable)
resizableBoolean
Define se a janela pode ter seu tamanho redefinido manualmente pelo usuário.
win.isResizable()
Retorna um boolean indicando se a janela pode ter seu tamanho redefinido manualmente pelo usuário.
win.setAlwaysOnTop(flag)
flagBoolean
Define se a janela deve estar sempre em cima de outras janelas. Após definir isso, a janela continua sendo uma janela normal, não uma janela toolbox que não pode receber foco.
win.isAlwaysOnTop()
Retorna um boolean indicando se a janela está sempre em cima de outras janelas.
win.center()
Move a janela para o centro da tela.
win.setPosition(x, y)
xIntegeryInteger
Move a janela para x e y.
win.getPosition()
Retorna um array com a posição atual da janela.
win.setTitle(title)
titleString
Muda o título da janela nativa para title.
win.getTitle()
Retorna o título da janela nativa.
Nota: O título da página web pode ser diferente do título da janela nativa.
win.flashFrame(flag)
flagBoolean
Inicia ou para de piscar a janela para atrair a atenção do usuário.
win.setSkipTaskbar(skip)
skipBoolean
Faz com que a janela não apareça na barra de tarefas.
win.setKiosk(flag)
flagBoolean
Entra ou sai do modo kiosk.
win.isKiosk()
Retorna um boolean indicando se janela está no modo kiosk.
win.hookWindowMessage(message, callback) Windows
messageIntegercallbackFunction
Engancha uma mensagem de janela. O callback é chamado quando a mensagem é recebida no WndProc.
win.isWindowMessageHooked(message) Windows
messageInteger
Retorna true ou false indicando se a mensagem está enganchada ou não.
win.unhookWindowMessage(message) Windows
messageInteger
Desengancha a mensagem de janela.
win.unhookAllWindowMessages() Windows
Desengancha todas as mensagens de janela.
win.setRepresentedFilename(filename) macOS
filenameString
Define o endereço do arquivo que a janela representa, e o ícone do arquivo será exibido na barra de título da janela.
win.getRepresentedFilename() macOS
Retorna o endereço do arquivo que a janela representa.
win.setDocumentEdited(edited) macOS
editedBoolean
Define se o documento da janela foi editado, e o ícone na barra de título se torna cinza quando definido como true.
win.isDocumentEdited() macOS
Retorna um boolean indicando se o documento da janela foi editado.
win.focusOnWebView()
win.blurWebView()
win.capturePage([rect, ]callback)
rectObject (opcional)- A área da página a ser capturada. Propriedades:xIntegeryIntegerwidthIntegerheightInteger
callbackFunction
Captura uma imagem da página dentro do rect. Após completar, callback será chamada com callback(imagem). imagem é uma instância de NativeImage que guarda dados sobre a imagem. Omitir rect captura toda a página visível.
win.loadURL(url[, options])
Igual a webContents.loadURL(url[, options]).
win.reload()
Igual a webContents.reload.
win.setMenu(menu) Linux Windows
menuMenu
Define menu como a barra de menu da janela, definir como null remove a barra de menu.
win.setProgressBar(progress)
progressDouble
Define o valor do progresso na barra de progresso. Extensão válida é [0, 1.0].
Remove a barra de progresso quando progress < 0.
Muda para o modo indeterminado quando progress > 1.
Na plataforma Linux, apenas suporta o ambiente de desktop Unity, você precisa definir o nome do arquivo como *.desktop no campo desktopName no package.json. Por padrão, irá assumir app.getName().desktop.
win.setOverlayIcon(overlay, description) Windows 7+
overlayNativeImage - o ícone a ser exibido no canto inferior direito da barra de tarefas. Se este parâmetro fornull, a sobreposição é eliminada.descriptionString - uma descrição que será providenciada a leitores de tela de acessibilidade.
Define uma sobreposição de 16px sobre o ícone da barra de tarefas atual, geralmente utilizado para indicar algum tipo de status de aplicação, ou notificar passivamente o usuário.
win.setThumbarButtons(buttons) Windows 7+
buttons Array de objetos button:
button Object, propriedades:
iconNativeImage - O ícone exibido na barra de ferramentas miniatura.tooltipString (opcional) - O texto do balão de dica do botão.flagsArray (opcional) - Controla estados e comportamentos específicos do botão. Utilizaenabledpor padrão. Pode incluir as seguintes strings:enabled- O botão está ativo e disponível para o usuário.disabled- O botão está desabilitado. Está presente, mas possui um estado visual indicando que não irá responder às ações do usuário.dismissonclick- Quando o botão é clicado, o flyout do botão da barra de tarefas fecha imediatamente.nobackground- Não desenhe a borda do botão, apenas utilize a imagem.hidden- O botão não é exibido para o usuário.noninteractive- O botão está habilitado, mas não interage; Não é exibido o estado de botão pressionado. Este valor está destinado a instâncias nas quais o botão é utilizado em uma notificação.
click- Função
Adiciona uma barra de ferramentes miniatura com um conjunto de botões específicos à imagem miniatura de uma janela no layout de um botão de barra de tarefas. Retorna um objeto Boolean indicando se a miniatura foi adicionada com sucesso.
O número de botões na barra de ferramentas miniatura não deve ser maior que 7 devido ao espaço limitado. Uma vez que você define a barra de ferramentas miniatura, ela não pode ser removida por causa da limitação da plataforma. Mas você pode chamar a API com um array vazio para limpar todos os botões.
win.showDefinitionForSelection() macOS
Mostra um dicionário pop-up que procura a palavra selecionada na página.
win.setAutoHideMenuBar(hide)
hideBoolean
Define se a barra de menu da janela deve se esconder automaticamente. Uma vez que for definida, a barra de menu só será exibida quando usuários pressionarem a tecla Alt.
Se a barra de menu já estiver visível, chamar setAutoHideMenuBar(true) não irá escondê-la imediatamente.
win.isMenuBarAutoHide()
Retorna um boolean indicando se a barra de menu se esconde automaticamente.
win.setMenuBarVisibility(visible)
visibleBoolean
Define se a barra de menu deve ser visível. Se a barra de menu se esconde automaticamente, os usuários ainda podem exibí-la ao pressionar a tecla Alt.
win.isMenuBarVisible()
Retorna um boolean indicando se a barra de menu está visível.
win.setVisibleOnAllWorkspaces(visible)
visibleBoolean
Define se a janela deve estar visível em todos os workspaces.
Nota: Esta API não faz nada no Windows.
win.isVisibleOnAllWorkspaces()
Retorna um boolean indicando se a janela está visível em todos os workspaces.
Nota: Esta API sempre retorna false no Windows.