Quiero crear una barra de título/controles personalizados para mostrar sobre la URL remota que se carga en una aplicación electrónica.
Por ejemplo, digamos que tengo un archivo llamado title.html :
<div> <button onclick="window.history.forward()">Go Forward</button> <button onclick="window.history.back()">Go Back</button> </div>digamos que estoy cargando la URL de youtube en mi aplicación electrónica:
const createWindow = () => { const window = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset', }) window.loadURL('https://youtube.com') } ¿Cómo hago para que mi title.html se muestre siempre arriba de YouTube para que pueda agregar botones de avance y retroceso y otras cosas?
Creo que la estrategia aquí es cargar su title.html en BrowserWindow y luego crear un BrowserView que aloje youtube y colocarlo apropiadamente.
(En mi aplicación, uso frame: false y no hiddenInset , pero con suerte se puede aplicar una idea similar aquí)
import * as path from "path"; import { BrowserWindow, BrowserView } from "electron"; const TITLEBAR_HEIGHT = 50; // px const createWindow = () => { const window = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' }) const browserView = new BrowserView({ webPreferences: { sandbox: true, contextIsolation: true }); window.setBrowserView(browserView); // load your titlebar page await window.loadFile(path.join(__dirname, "./index.html")) // position the titlebar const contentBounds = window.getContentBounds(); browserView.setBounds({ x: 0, y: 0, width: contentBounds.width, height: contentBounds.height - TITLEBAR_HEIGHT }); browserView.setAutoResize({ width: true, height: true }); browserView.loadURL('https://youtube.com'); }Y configuraría la altura de su barra de título en su hoja de estilo:
<div id="titlebar> ... </div> #titlebar { height: 50px; }