I'm building application that basically will host other webpages inside of it as sub view (BrowserViews), similar to how chrome render different tabs in one window (BrowserWindow).
I'm facing an issue where when one BrowserView is stuck (intentionally) I cannot remove it from the main BrowserWindow using removeBrowserView, it seem that it's only applied when the stuck view is abusing the memory with many console.logs.
My code look as follow: main process index.ts:
const createWindow = (): void => {
// Create the browser window.
const mainWindow = new BrowserWindow({
height: 600,
width: 800,
webPreferences: {
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
},
});
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
const stuckme1 = new BrowserView();
stuckme1.webContents.loadURL(STUCKME_WEBPACK_ENTRY);
stuckme1.setBounds({ x: 0, y: 0, height: 200, width: 200 });
const stuckme2 = new BrowserView();
stuckme2.webContents.loadURL(STUCKME2_WEBPACK_ENTRY);
stuckme2.setBounds({ x: 0, y: 0, height: 200, width: 200 });
let toggle = true;
setInterval(() => {
if (toggle) {
mainWindow.removeBrowserView(stuckme1);
mainWindow.addBrowserView(stuckme2);
} else {
mainWindow.removeBrowserView(stuckme2);
mainWindow.addBrowserView(stuckme1);
}
toggle = !toggle;
}, 1000);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<style>
body {
border: 1px soild green;
}
</style>
<script type="text/javascript">
setInterval(() => {
document.querySelector(".counter").innerHTML = Number(document.querySelector(".counter").innerHTML) + 1
}, 1000);
setTimeout(() => {
while (true) { console.log("stuck"); }
}, 5000);
</script>
</head>
<body>
<p>Stuck me</p>
<span class="counter"></span>
</body>
</html>
and stuckme2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<style>
body {
border: 1px soild red;
}
</style>
<script type="text/javascript">
setInterval(() => {
document.querySelector(".counter").innerHTML = Number(document.querySelector(".counter").innerHTML) + 1
}, 1000);
</script>
</head>
<body>
<p>Stuck me2</p>
<span class="counter"></span>
</body>
</html>
After 5 seconds, Only the first stuckme.html is showed, and the main process seem to unable to remove the view and show the second view. No error is throw, but the memory usage keep getting bigger.
I need a way to keep the view responsive even if bad code is written in it.
Appreciate any help with this.
Thank you!
