Jelmerro/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello World!</h1>
    <button class="button1">Toggle display</button>
    <button class="button2">Minimize then toggle</button>
    <button class="button3">Maximize, minimize and then toggle</button>
    <webview src="./index.html"></webview>
  </body>
</html>

## main.js
const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      preload: path.join(__dirname, 'renderer.js'),
      contextIsolation: false,
      webviewTag: true
    }
  })
  mainWindow.webContents.once("did-finish-load", () => {
    mainWindow.webContents.on("will-attach-webview", (_, prefs) => {
      prefs.preload = path.join(__dirname, 'preload.js')
      prefs.contextIsolation = false
    })
  })
  mainWindow.loadFile('index.html')
}
app.whenReady().then(createWindow)

ipcMain.on("minimize", () => mainWindow.minimize())
ipcMain.on("maximize-then-minimize", () => {
  mainWindow.maximize()
  setTimeout(() => {
    mainWindow.minimize()
  }, 200)
})

## preload.js
window.addEventListener("load", () => {
  document.querySelector("h1").textContent = "Hello Webview!"
  ;[...document.querySelectorAll("button")].forEach(b => b.remove())
  const {ipcRenderer} = require("electron")

  window.addEventListener("visibilitychange", () => {
    ipcRenderer.sendToHost("data", document.visibilityState)
  })
})

## renderer.js
const {ipcRenderer} = require("electron")
let webview

const toggleVisibility = () => {
  if (webview.style.display === "none") {
    webview.style.display = "inherit"
    log("set: visible")
  } else {
    webview.style.display = "none"
    log("set: hidden")
  }
}

const log = text => {
  const el = document.createElement("div")
  el.textContent = text
  document.body.appendChild(el)
}

window.addEventListener("DOMContentLoaded", () => {
  document.querySelector("h1").textContent = "Hello Renderer!"
  webview = document.querySelector("webview")
  document.querySelector(".button1").addEventListener("click", toggleVisibility)
  document.querySelector(".button2").addEventListener("click", () => {
    ipcRenderer.send("minimize")
    log("minimize")
    setTimeout(toggleVisibility, 1000)
  })
  document.querySelector(".button3").addEventListener("click", () => {
    ipcRenderer.send("maximize-then-minimize")
    log("maximize then minimize")
    setTimeout(toggleVisibility, 1000)
  })
  webview.addEventListener("ipc-message", e => document.body.lastChild.textContent += `, actual: ${e.args[0]}`)
})

## styles.css
webview {border: 2px solid #000;}
webview {position: absolute;top: 200px;left: 200px;}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<link href="./styles.css" rel="stylesheet">
	</head>
	<body>
	<h1>Hello World!</h1>
	<button class="button1">Toggle display</button>
	<button class="button2">Minimize then toggle</button>
	<button class="button3">Maximize, minimize and then toggle</button>
	<webview src="./index.html"></webview>
	</body>
	</html>
	const {app, BrowserWindow, ipcMain} = require('electron')
	const path = require('path')
	let mainWindow

	function createWindow () {
	mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	frame: false,
	webPreferences: {
	preload: path.join(__dirname, 'renderer.js'),
	contextIsolation: false,
	webviewTag: true
	}
	})
	mainWindow.webContents.once("did-finish-load", () => {
	mainWindow.webContents.on("will-attach-webview", (_, prefs) => {
	prefs.preload = path.join(__dirname, 'preload.js')
	prefs.contextIsolation = false
	})
	})
	mainWindow.loadFile('index.html')
	}
	app.whenReady().then(createWindow)

	ipcMain.on("minimize", () => mainWindow.minimize())
	ipcMain.on("maximize-then-minimize", () => {
	mainWindow.maximize()
	setTimeout(() => {
	mainWindow.minimize()
	}, 200)
	})
	window.addEventListener("load", () => {
	document.querySelector("h1").textContent = "Hello Webview!"
	;[...document.querySelectorAll("button")].forEach(b => b.remove())
	const {ipcRenderer} = require("electron")

	window.addEventListener("visibilitychange", () => {
	ipcRenderer.sendToHost("data", document.visibilityState)
	})
	})
	const {ipcRenderer} = require("electron")
	let webview

	const toggleVisibility = () => {
	if (webview.style.display === "none") {
	webview.style.display = "inherit"
	log("set: visible")
	} else {
	webview.style.display = "none"
	log("set: hidden")
	}
	}

	const log = text => {
	const el = document.createElement("div")
	el.textContent = text
	document.body.appendChild(el)
	}

	window.addEventListener("DOMContentLoaded", () => {
	document.querySelector("h1").textContent = "Hello Renderer!"
	webview = document.querySelector("webview")
	document.querySelector(".button1").addEventListener("click", toggleVisibility)
	document.querySelector(".button2").addEventListener("click", () => {
	ipcRenderer.send("minimize")
	log("minimize")
	setTimeout(toggleVisibility, 1000)
	})
	document.querySelector(".button3").addEventListener("click", () => {
	ipcRenderer.send("maximize-then-minimize")
	log("maximize then minimize")
	setTimeout(toggleVisibility, 1000)
	})
	webview.addEventListener("ipc-message", e => document.body.lastChild.textContent += `, actual: ${e.args[0]}`)
	})
	webview {border: 2px solid #000;}
	webview {position: absolute;top: 200px;left: 200px;}