Best way to have multiple webviews in one html page


I have a webview inside my index.html page with a preload script and some code in my renderer process that affects the webview.

Right now I only have one webview, but I would ideally like to have multiple webviews that each operate independently of one another, similar to how a browser can have different tabs that can each run different websites and js.

How is it possible to do this? Can I somehow create an array of webviews? Could I possibly programatically give each webview a unique ID and operate on them then? What is the best way to manage this?

I also have IPC messages going to the preload script of my webview, so how can I keep these messages organized so that they would go to the correct webview?


If you want create webview with tabs, you can use/learn with electron-navigation project

To show 1 webview with him tab and hide others

Yes, you can, for webview hide&show

Maybe, If in preload script, you have an IPCmessage, your webview must have the attribute nodeintegration
To send message Webview to renderer, used ipcRenderer.sendToHost
To keep message in renderer, used ipcRenderer.on


This is incredibly helpful thank you. I’m still trying to figure out how to work these tabs into my app but, from the looks of it, this will be the solution I am searching for! I may come back in a few days and ask a follow-up question but thanks again!