CODEWITHSUNDEEP
javascriptelectron
ingsaurabh
ingsaurabh

Reputation: 15269

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)
}

Upvotes: 10

Views: 24606

Answers (3)

iharshraj
iharshraj

Reputation: 31

Im gonna post a solution you might be facing with fullscreening:

When fullscreening taskbar getting in way.

When you fullscreen using mainWindow.setFullScreen(true) taskbar will get in way when you are on home (all windows minimized) in windows.

Here is the solution:

ipcMain.on("fullscreenon",()=>{
  mainWindow.setAlwaysOnTop(true, 'screen-saver');
  mainWindow.setFullScreen(true);
})
//The order of the commands is important below
//don't setAlwaysOnTop() before getting out of fullscreen.
ipcMain.on("fullscreenoff",()=>{
  mainWindow.setFullScreen(false);
  mainWindow.setAlwaysOnTop(true, 'floating')
})

Basically, by default setFullscreen uses the level: "floating". We need a higher level, "screen-saver" is the highest level I think.

Upvotes: 2

crispengari
crispengari

Reputation: 9321

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.

Upvotes: 4

Paulo Galdo Sandoval
Paulo Galdo Sandoval

Reputation: 2203

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);

Upvotes: 25

Related Questions