Ufdjrw

Let's say I have a BrowserView inside a BrowserWindow:

browserWindow = new BrowserWindow( width: 1200, height: 600 );
browserWindow.webContents.loadURL('file://' + __dirname + '/top_toolbar.html');

let browserView1 = new BrowserView( webPreferences: nodeIntegration: false );
browserWindow.setBrowserView(browserView1);
browserView1.setBounds( x: 0, y: 50, width: 600, height: 600 ); // y=50 to keep top toolbar
browserView1.webContents.loadURL('https://www.twitter.com');

When I click on a UI button (another "tab", like in a browser), I'd like to change the URL to another website (such as https://www.gmail.com).

When I'll click back to the first "tab", I'd like that the BrowserView recovers the previous website (Twitter) and all its browsing history. Obviously, using:

browserView1.webContents.loadURL('https://www.twitter.com');

again wouldn't be a good solution because there would be a page loading waiting time.

Instead I'd like to restore the previous state of the BrowserView instantly (i.e. < 50 ms), exactly like when you click on a tab in a browser like Chrome or Firefox: if the website in the tab has already been loaded before, clicking on the tab just re-displays it.

Question: how to store and then restore instantly a BrowserView state? i.e. without requiring to reload the page?

The solution is to have multiple BrowserViews and switch between them. That way each will remember its history.

var browserViews = [];
var activeBW;

function addAndSwitchToTab() 
 activeBW = browserViews.length;
 browserViews[activeBW] = new BrowserView();
 browserWindow.setBrowserView(activeBW);

Start with the first one:

addAndSwitchToTab();

When the user opens a new tab, just call the function again.

Try this for button click:

 onClick()
 const shell = require('electron').shell;
 event.preventDefault();
 shell.openExternal('https://www.twitter.com');