Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Electron set fullscreen onclick

I am trying to make app window fullscreen on click but get following error main.js:29 Uncaught TypeError: Cannot read property 'setFullScreen' of undefined

main.js

    const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 1200, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)
  // Open the DevTools.
  mainWindow.webContents.openDevTools()
  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

function toggleFullScreen() {
  mainWindow.setFullScreen(true)
}
like image 579
ingsaurabh Avatar asked Aug 21 '16 08:08

ingsaurabh


2 Answers

You can set the full screen when you create the windows object.

const {BrowserWindow} = require('electron');
let win = new BrowserWindow({width: 800, height: 600, fullscreen: true});

Check here what options you can add when you make a window Electron BrowserWindow

My bad, i forgot you want to make it full on click. In a function use this.

var electron = require('electron');
var window = electron.remote.getCurrentWindow();
window.setFullScreen(true);
like image 178
Paulo Galdo Sandoval Avatar answered Nov 06 '22 23:11

Paulo Galdo Sandoval


Suppose you have a certain button that you want to click for FullScreen to be enabled. The function bellow does the functionality of changing the screen to full screen. All you have to do is call it on the button click.

 const handleFullScreen =()=>{
    remote.getCurrentWindow().setFullScreen(true)
}

Note that remote I'm using remote because this function is triggered in the Renderer that's where my button that maximise the screen is.

like image 4
crispengari Avatar answered Nov 07 '22 00:11

crispengari