I am trying to make a window application in Electron.js. When I run it, it makes preload.js script:
const mainWindow = new BrowserWindow({
width: 500,
height: 500,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
});
I want a new window with a loading indicator to appear till preload.js not finish. How can I reach it?
create first the loading window like this:
loadingWindow = new BrowserWindow({
width: 512,
height: 384,
resizable: false,
transparent: true,
frame: false,
})
loadingWindow.loadFile('views/loading.html')
make shure that you clear this window if you close it
loadingWindow.on('closed', function () {
loadingWindow = null
});
than create your main window but hide it
const mainWindow = new BrowserWindow({
width: 500,
height: 500,
show: false, // hide this window
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
});
mainWindow.loadFile('yourFile.html');
than get the did-finish-load event to close the loading window and show the mainWindow
mainWindow.webContents.on('did-finish-load', () => {
if (loadingWindow) loadingWindow.close();
mainWindow.show();
})
Related
Trying to get my head around getting a dialog.showMessageBox() in the render process using preload. I'm trying const {dialog} = require( 'electron') but it's returning undefined. What am I missing?
main.js:
const consoleWindow = new BrowserWindow({
title: 'TakServer | Console',
width: DEBUG ? 1000 : 800,
height: 600,
resizable: true,
alwaysOnTop: true,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true, n
enableRemoteModule: false,
preload: path.join(__dirname, "preload.js")
}
})
preload.js:
const { contextBridge, dialog } = require("electron");
console.log( "dialog", dialog ) // !! undefined
contextBridge.exposeInMainWorld( 'api',
{
test: ( x ) => {
const {fs} = require( 'fs' )
console.log( "gubbmins", fs )
dialog.showMessageBox( {
type: "info",
message: "stuff"
})
}
}
)
I'm creating a 600 x 300 window in Electronjs and I want to get the cursor position all over the screen, even if the cursor is outside the window. How can I do this?
My window:
let win = new BrowserWindow({
width: 600,
height: 300,
transparent: true,
show: false,
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
nodeIntegrationInWorker: true,
},
})
I am getting the position this way, but if I move the cursor outside the window it stops working (The windows is focused).
ipcMain.handle('getPoint', async(event, someArgument) => {
const point = screen.getCursorScreenPoint()
return point
})
I'm trying to connect with preload and frame.tsx
But, It isn't working.
frame.tsx
function handleButtonClick(id: string) {
window.electron.send("requestWindowChange", "data") // Error part
if(id === 'maximize') {
setIsMaximize(!isMaximize)
}
}
I simply add it. and...
preload.ts
import {contextBridge, ipcRenderer} from 'electron'
contextBridge.exposeInMainWorld('electron', {
send: (channel:string, data) => {
let normalChannels = ['requestWindowChange']
if (normalChannels.includes(channel)) {
ipcRenderer.send(channel, data)
}
},
receive: (channel:string, func) => {
let normalChannels = ['responseWindowChange']
if (normalChannels.includes(channel)) {
ipcRenderer.on(channel, (_event, data) => func(data))
}
}
})
Also, I'm already making 'preload.ts' to 'preload.js' by using 'tsc' command.
Finally, here is the electron.ts
mainWindow = new BrowserWindow({
height: 720,
width: 1280,
minHeight: 300,
minWidth: 450,
frame: false,
show: false,
center: true,
fullscreen: false,
kiosk: !isDev,
resizable: true,
webPreferences: {
preload: path.join(__dirname, "preload.js")
}
})
I only copy necessary part.
If you need more code, please comment here.
I really don't know why It isn't working.
Here is Error Message.
any Property 'electron' does not exist on type 'Window & typeof
globalThis'. Did you mean 'Electron'?ts(2551)
I'm trying searching and asking for a week, finally I find it.
Just add this at frame.tsx.
declare global {
interface Window {
api? : any
}
}
What a simple it is...
so I'm writing on a electron application at the moment.
To make my application a bit smoother I created a BrowserWindow and loaded just the menubar and the background.
After that I added a BrowserView to show the acutal content.
Code for my BrowserWindow:
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
show: false,
frame: false,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile(path.join(__dirname, 'views/index.pug'));
win.on('closed', () => {
win = null;
})
win.once('ready-to-show', () => {
win.show();
})
}
Code for my BrowserView:
function createViews() {
contentView = new BrowserView({ webPreferences: { nodeIntegration: true } });
win.addBrowserView(contentView);
contentView.setBounds({ x: 0, y: 23, width: win.getBounds().width, height: win.getBounds().height - 23 });
contentView.setAutoResize({ width: true, height: true });
contentView.webContents.loadFile(path.join(__dirname, 'views/imageGallery.pug'));
}
(If there is a spoiler function to hide the code: I'm sorry, I didn't find any)
Once I create the window it works like intended, also the normal resize via mouse-drag works perfectly.
Now my problem is, as soon as I maximize or unmaximize my window with the functions win.maximize() and win.unmaximize() my BrowserView gets resized. But the resize doesn't fit the BrowserWindow anymore. The content of the BrowserView is being cutted on the right side.
Window after being maximized:
Window after being unmaximized:
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({ useContentSize: true });
const view = new BrowserView();
mainWindow.setBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 800, height: 600 });
view.setAutoResize({ width: true, height: true });
view.webContents.loadURL("https://youtube.com");
}
I am trying to show the window after the URL and everything inside that page is loaded. This is the script:
var loadWindow = new BrowserWindow({
width: 500,
height: 300,
frame: false,
resizable: false,
fullscreen: false,
scrollbars: false,
show: false
})
loadWindow.loadUrl('file://' + __dirname + '/index.html')
What I tried:
loadWindow.on('ready', function(){
loadWindow.show()
})
I also tried to on('loaded'), but none of these is working. What is the best solution to load a URL inside a page and display it only after everything is loaded?