I'm struggling to pass a data from newly opened site window to renderer. What I want to achieve is to find a login button on site and listen on click event. I was reading about webview in electron, but I couldn't make It work. For now I'm stuck on window.open() method. Can you please point me what aspect I am missing? Here are my files:
//main.js
const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
mainWindow.loadFile('index.html')
// Open the DevTools.
mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
ipcMain.on("open-login-window", () => {
console.info('dostal');
});
//renderer.js
const electron = require("electron");
const ipc = electron.ipcRenderer
const button = document.getElementById("login-button");
button.addEventListener("click", () => {
ipc.send("open-login-window")
const windowProxy = window.open('https://www.somesite.com/login', null, 'minimizable=false')
windowProxy.postMessage('hi', '*')
});
Related
Hello I am trying to create an electron app what I want the the app to do is on clicking the app close button I want the render to keep running in the background and go the the taskbar tray and make sure it can listen to any key Trigger.
I had written some code to make the app go the the tray and have a tray icon but it does not keep the app running the bg it moves it to tray and the options on the tray icon are not working as expected see this image for reference:
now on clicking the show app it reloads the entire render and on quit it dosen't even quit the application.
Here is my main.js code:
// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu, nativeImage, Tray } = require("electron");
const path = require("path");
let mainWindow;
let tray=null;
function createWindow() {
// Create the browser window.
if (!tray) {
// if tray hasn't been created already.
createTray();
}
let win = new BrowserWindow({
width: 450,
height: 240,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
autoHideMenuBar: true,
});
win.loadURL("http://localhost:3000");
win.on("close", function (event) {
event.preventDefault();
win.hide();
});
win.on("restore", function (event) {
win.show();
tray.destroy();
});
return win;
}
function createTray() {
const icon = path.join(__dirname, "/public/favicon.ico"); // required.
const trayicon = nativeImage.createFromPath(icon);
tray = new Tray(trayicon.resize({ width: 16 }));
const contextMenu = Menu.buildFromTemplate([
{
label: "Show App",
click: () => {
createWindow();
},
},
{
label: "Quit",
onClick: () => {
app.quit();
},
},
]);
tray.setContextMenu(contextMenu);
}
app.whenReady().then(() => {
mainWindow = createWindow();
});
app.on("activate", function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
We are currently improve a project with electronjs: We have main.js for electron as you know and we have another html page that javascripts codes in it. We created a close button in this html page and this button should close the app but we cant reach main.js for close the app. Can you help me?
This code is from html page :
<div class="background-three link-container">
<button class="link-three" onclick="kapat()" id="kptbtn">Kapat</button>
</div>
<script>
function kapat(){
//what should I write here.
}
</script>
and this main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
const win = new BrowserWindow({
transparent: true,
frame: false,
resizable: false,
width: 500,
height: 700,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('girisEkrani.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
You must use ipcMain and ipcRenderer. Main for reading message and Renderer for sending message.
.html page
<script>
function kapat() {
const { ipcRenderer } = require('electron')
const ipc = ipcRenderer;
ipc.send('kapat');
}
...
</script>
if you define ipc stuff out of the function it will not work and effect other functions.
main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const ipc = ipcMain;
function createWindow() {
const win = new BrowserWindow({
transparent: true,
frame: false,
resizable: false,
width: 500,
height: 700,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
}
})
ipc.on('kapat', () => { win.close() })
win.loadFile('girisEkrani.html')
}
I would like know how I can set configuration width and height in new window opened in electron above my code on main.js
const {app, BrowserWindow, webContents, session} = require('electron')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({
width: 1000, height: 800,
webPreferences: {
contextIsolation: false,
nodeIntegration: true
}
})
mainWindow.loadFile('Control/index.html')
mainWindow.setMenu(null)
mainWindow.on('closed', () => {
mainWindow = null
})
let wc = mainWindow.webContents
wc.on('new-window', (e, url) => {
e.preventDefault()
}
}
I am working on a project with Electron and React. I am going to be making multiple calls to the database via ipcMain and ipcRenderer so I moved the calls for ipcMain to another file(ipcMainHandler.js).
The challenge I am facing now is how to send responses back to the ipcRenderer. I am unable to access the mainWindow from within that file.
This is the code for my main file.
const url = require('url');
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
preload: __dirname + '/preload.js'
},
});
const startUrl =
process.env.ELECTRON_START_URL ||
url.format({
pathname: path.join(__dirname, './build/index.html'),
protocol: 'file:',
slashes: true,
});
mainWindow.loadURL(startUrl);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
if (mainWindow === null) {
createWindow();
}
});
require('./src/server/helpers/ipcMainHandler.js');
The ipcMainHandler.js file
const { SIGNIN_REQUEST, SIGNIN_RESPONSE } = require('../../common/events.js');
const { ipcMain } = require('electron');
ipcMain.on(SIGNIN_REQUEST, (event, data) => {
const user = AuthController.userSignin({ ...data });
});
Things I have tried
Accessing the currentWindow from remote - throws a remote undefined error
Adding the mainWindow to a global variable and trying to access it in the ipcHander. - This also returns an undefined message.
This has been resolved. I used the event object to send the response from ipcMain.
ipcMain.on(SIGNIN_REQUEST, async (event, data) => {
const user = await AuthController.userSignin({ ...data });
event.sender.send(SIGNIN_RESPONSE, user);
});
Here is my code Github repo url
const {app, Menu, ipcMain} = require('electron');
const mainWindow = require("./windows/mainWindow");
// Catching events from clients
ipcMain.on("login", ()=>{
dashboardWindow();
mainWindow.close();
})
./windows/mainWindow file:
// Initialize main window
const mainWindow = () => {
let mainWindow = new BrowserWindow({
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true
}
});
// Load html in window
mainWindow.loadFile("./templates/index.html")
mainWindow.webContents.openDevTools();
}
module.exports = mainWindow;
How could I close a window?
mainWindow is a function, so you need to call it and inside the function also return the window:
const {app, Menu, ipcMain} = require('electron');
const mainWindowFunc = require("./windows/mainWindow");
const mainWindow = mainWindowFunc(); // <-- Call function
ipcMain.on("login", ()=>{
dashboardWindow();
mainWindow.close(); // <-- Now close should be available, because you call it on the instance of BrowserWindow
})
./windows/mainWindow file:
const mainWindow = () => {
let mainWindow = new BrowserWindow({
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile("./templates/index.html")
mainWindow.webContents.openDevTools();
return mainWindow; // <-- return window
}
module.exports = mainWindow;