Using ElectronJS, how do you change an existing frameless window into a framed window?
Something like this:
const splashWindow = createWindow('splash', {
width: 500,
height: 300,
frame: false,
});
splashWindow.addFrame();
// Now splashWindow has a frame
You can only set frame when creating a BrowserWindow
Related
I also looked for solutions to other problems, but they did not turn out as I wanted. How can I delete the top bar of the window, as I marked in the photo?
[photo]
native APIs directly supports frameless windows. You need to pass the frame option false while creating new window. Here is the example.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
You can read more at official docs
I'm making a game with Phaser 3.
It creates a canvas at the center of the page and displays the game screen in it.
Display the canvas in the Electron window.
At that time, I would like to display the canvas without zooming in or out.
The canvas size is width: 800 px, height: 600 px.
So I wrote the following code:.
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
resizable: false,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
preload: path.join(__dirname, 'preload.js'),
},
});
The following window appears.
The orange part is canvas.
When I checked in Developer Tools, width: 800 px, height: 600 px are correct.
However, the size of the was width: 777 px, height: 604 px.
This value differs from the width: 800 px, height: 600 px that I specified when I created the Electron window.
Because of that, the scroll bar is displayed.
Why does Electron generate windows smaller than the size I specified when creating them?
Does anyone know why this happens?
How do I fix the size of to width: 800 px, height: 600 px?
The version of Electron is 9.2.1.
You need to add the useContentSize property set to true to the options of new BrowserWindow():
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
useContentSize: true,
resizable: false,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
preload: path.join(__dirname, 'preload.js'),
},
});
See options of new BrowserWindow():
useContentSize Boolean (optional) - The width and height would
be used as web page's size, which means the actual window's size will
include window frame's size and be slightly larger. Default is false.
I am using electron version 8.2.5. The window height increases after minimize and restore and goes below my task bar.
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().workAreaSize;
win = new BrowserWindow({
x: (size.width / 2) - (550 / 2),
y: 0,
width: 550,
height: size.height,
frame: false,
resizable: false
});
I googled it and found this workaround to set size on restore event:
win.on('restore', () => {
win.setSize(550, size.height);
});
But when doing that the window flickers twice after minimize and restore. Is there any other way to rectify this?
Instead of using workAreaSize, try to use size.
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().size;
I'm using electron 8.2.4 but works for me and I don´t have to use the event on restore.
I'm looking to make an Electron window have a transparent background, but keep its window chrome.
I used the following:
const previewWindow = new BrowserWindow({
width: 800,
height: 600,
x: 1000,
y: 100,
transparent: true,
webPreferences: {
nodeIntegration: true
}
});
I also set the following CSS on the body of the page being displayed in the window:
background: transparent;
I also tried background: none.
The window still have the default white background.
Is it possible to have a transparent window in Electron without it being frameless?
I have a function that is being called once the user hover the window. Is it possible to change the width of the window? this is my function:
function resize() {
console.log('resize');
}
Yes, it's possible to get access to the renderers BrowserWindow API. Simply include the remote module and get the current window, this will allow you to do everything you can from the main process.
Example:
let { remote } = require('electron')
let win = remote.getCurrentWindow()
// Access to the renderers BrowserWindow API
win.setBounds({
width: 1000
})
win.getBounds()
// Object {x: 240, y: 192, width: 800, height: 600}
Reference: BrowserWindow API documentation