I'm developing an app using Electron. Using win.loadFile('index.html') used to work, but from yesterday it throws an error saying: win.loadFile is not a function.
Could it be "Knex.js" which caused this error? Because I installed it recently and the problems began to appear after that. Also, I noticed that Electron icon changed from transparent to a light blue (green) circle.
In addition, Using loadURL works but it renders the html file incompletely.
This is my main.js (I removed knex.js code from main.js but didn't help):
const { app, BrowserWindow } = require('electron')
const url = require('url')
const path = require('path')
function createWindow () {
// Create the browser window.
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html');
}
app.on('ready', createWindow)
Check your Electron version. The version of Electron you want to run, install it globally. Here's the issue on GitHub:
BrowserWindow .loadFile is not a function
Related
I have a problem to change icon in Electron.
The code work fine, but when I add the line <<icon: "img/icon.png">> is produced a blank program (without anything).
This is the code:
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: false
},
icon: "img/icon.png"
});
win.setMenu(null);
win.loadFile('index.html');
win.webContents.openDevTools();
}
To change icon of the window pass it in BrowserWindow constructor and use absolute path for simplification
icon (NativeImage | String) (optional) - The window icon. On Windows it is recommended to use ICO icons to get best visual effects, you can also leave it undefined so the executable's icon will be used.
You will need to use some converter to generate .ico and .icns files.
let icon;
switch (process.platform) {
case 'win32': icon = path.resolve(__dirname, 'img', 'icon.ico'); break;
case 'darwin': icon = path.resolve(__dirname, 'img', 'icon.icns'); break;
case 'linux': icon = path.resolve(__dirname, 'img', 'icon.png'); break;
}
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: false
},
icon
});
Also, you can create NativeImage like this: const icon = nativeImage.createFromPath(path.resolve(__dirname, 'img', 'icon.png'));
But, you don't actually need to set icons manually, electron will use executable's icon by default. So just configure electron-packager to use proper icons (add packagerConfig: { icon: img/icon } } in forge.config.js and place icon.png, icon.icns and icon.ico into img dir)
Right, but the problem is that doesn't exist anything of error.
But... I've just done another attempt with the following command: electron-package --overwrite --icon=icon.ico
Now works!!! but the question is: WHY ???
This is my createWindow function that I pass to app.on('ready')
function createWindow () {
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '../index.html'),
protocol: 'file:',
slashes: true,
})
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: true,
preload: path.join(__dirname, 'preload.js')
},
})
mainWindow.loadURL(startUrl)
mainWindow.removeMenu() // <----------------- HERE!
mainWindow.on('closed', function () {
mainWindow = null
})
}
Pretty boiler plate the issue is that the mainWindow.removeMenu() does not work and it leaves it in places.
I've also tried setMenu(null) and the menu is still there.
Is the menu only removed in production, or am I doing something wrong?
Edit
I've also tried mainWindow.setMenuBarVisibility(false), and it does not work as well.
Chances are that you are still using an old version of Electron. There has been a bug preventing the removal of the menu bar for a long time. It has been fixed in Electron 7.1.5:
Release Notes for v7.1.5
Fixes
Fixed window menu unable to hide on startup. #21449
So, mainWindow.removeMenu() should work fine once you upgrade Electron to its latest version, or at least a version greater than or equal to 7.1.5.
I have an electron desktop application which opens 2 new windows when I load it, the code to open the new windows is this:
electron = require('electron')
win = electron.remote.getCurrentWindow();
BrowserWindow = electron.remote.BrowserWindow;
wind = new BrowserWindow({
width: 400,
height: 200,
x:3,
y:12,
frame: false,
// transparent: true,
alwaysOnTop: true, // Add this line
// skipTaskbar:true, // don't show icon on taskbar
opacity:0.9,
})
Now when I'm testing my application, I use the Reload command a lot (ctrl+R on windows). My problem is that when I do it, the windows remain open and it opens more windows on top of it.
How can I make Reload close all windows?
The onbeforeunload event is triggered (In the renderer) when a window is closed or reloaded. You can use this to close the individual window.
Otherwise you can inform electron via a IPC message to close all your windows for you.
Something like this should do the job.
// renderer/index.js
const {ipcRenderer} = require('electron')
ipcRenderer.send('my-closeallwindowsasap-channel') // can have arguments
// -------------------------------------------------------
// main/index.js
ipcMain.on('my-closeallwindowsasap-channel', (event, arg) => {
BrowserWindow.getAllWindows().forEach(window => {
window.close()
})
})
I'm trying to open pdf in electron app with electron-pdf-window. Its working fine before build but when i build app as installer .exe file for windows and install exe file on windows 8.1 , its not showing pdf window, i am using it through renderer process on click of anchor. Any ideas?
here is my code
function pdfWindow() {
const { BrowserWindow } = require('electron').remote
const PDFWindow = require('electron-pdf-window')
const win = new BrowserWindow({ width: 800, height: 800 })
PDFWindow.addSupport(win)
win.loadURL('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
}
and i am calling this function on click of anchor tag
If you're using the latest Electron 1.8 or newer, it has built in PDF support in BrowserWindow's and <webview> tags. You just have to ensure plugins are enabled:
BrowserWindow
const window = new BrowserWindow({
width: 1024,
height: 800,
webPreferences: {
plugins: true
}
});
window.loadURL('path/to/file.pdf');
<webview> Tag
<webview src="path/to/file.pdf" plugins></webview>
I've got an electron app, below is the main.js file:
var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
app.on('ready', function() {
mainWindow = new BrowserWindow({
height: 715,
width: 1200,
minWidth: 600,
minHeight: 200,
center: true
});
mainWindow.loadURL('file://' + __dirname + '/index.html');
});
As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but NOT to be in full screen, such that the dock and tool bar of the OS are hidden).
In simple CSS this is done by using
width:100%;
height:100%;
I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it
Note: fullscreen: true is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden
Can anyone help?
use this!
win = new BrowserWindow({show: false});
win.maximize();
win.show();
Call mainWindow.maximize() to maximize the window after you create it.
Use this:
const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
win = new BrowserWindow({width, height})
win.loadURL('https://github.com')
})
try this code after your mainWindow declaration
mainWindow.once('ready-to-show', () => {
mainWindow.maximize()
})
It worked for me
The solution is simple, only add titleBarStyle: 'hidden' to declaration of your window.
const mainWindow = new BrowserWindow({
movable: false,
resizable: false,
maximizable: false,
minimizable: false,
titleBarStyle: 'hidden', // watch this line
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
DevTools: false,
}
});
note that I only have tested on Windows OS and it can be change in other OS like Mac.