Search code examples
javascriptvue.jselectronvue-cli

How to switch electron between windows with false or true frame, depending on the url


I am creating an application in electron that start with the window with false frame on the login screen. I would like to know how do I change the frame property from "false" to "true" when the application url changes.

Example:

let win = new BrowserWindow({
    width: 1000,
    height: 650,
    frame: false,
    transparent: true
})

win.webContents.on('did-navigate-in-page', (event) => {
   if(win.webContents.getURL() == 'http://localhost:8080/#/'){
      **win.setFrame(false)**
   }else{
      **win.setFrame(true)**
   }
})

Thank you so much if you can help me. I hope I have explained well what I need.


Solution

  • I don't believe that Electron currently provides a way to change a window from frameless to framed or vice versa after it has been created.

    One alternative would be to create and destroy windows on the fly as you navigate between pages that should be framed or frameless. That obviously has lots of overhead and loses in-memory data, so it would only be practical if, for example, you only need the initial login screen to be frameless. For that narrow case, you might do:

    let loginWin = new BrowserWindow({
        width: 1000,
        height: 650,
        frame: false,
        transparent: true
    })
    
    loginWin.webContents.on('did-navigate-in-page', (event) => {
        if(loginWin.webContents.getURL() == 'http://localhost:8080/#/'){
            let mainWin = new BrowserWindow({
                width: 1000,
                height: 650
            })
            mainWin.loadURL('http://localhost:8080/#/')
            loginWin.destroy()
        }
    })
    

    The experimental BrowserView API could also be used to teleport one continuous webContents between two or more different windows, I suppose.

    If you do need to add and remove the window chrome more frequently, another option would be to draw the chrome yourself. It wouldn't have the native style of the OS, but it would have the flexibility you need. Here is one package that handles the titlebar portion for you: frameless-titlebar. Not sure about draggable borders, if those are also needed.