How to stop sidebar.html from flashing when navigating between html files <webview>


The problem I am trying to solve, is basically stopping my electron app’s sidebar from flashing each time I switch between pages.

My index.html has a sidebar (sidebar.html) on the left and a webview on the right (embedded via tags). My sidebar links to 3 local files (index.html, page1.html, & page2.html. Is there anyway I can keep the sidebar content static on the left loaded without it flashing each time I switch between pages.

The issue is basically that each of the 3 local html files is a duplicated version of the index.html and calls sidebar.html when it is loaded. Any ideas on how to solve this?


If I understand you correctly the issue is that your replacing the window content every time someone clicks one of the links in the sidebar, as your essentially loading a new page then there isn’t a way to prevent it from flashing as just like a normal web page your unloading the current page and loading the next.

Possible solutions;

  1. Use an iframe for your content, keeping the sidebar on your main page and replacing the content of the iframe with the individual pages.

  2. Load the page via JavaScript and replace the contents that need to be replaced on your present page without reloading.

These aren’t the only 2 solutions but are the easiest without having to recode your app.


Thanks @alistairuk, I ended up utilizing Javascript to load seperate html files that link to various pages:

a href="#gpage" onclick="loadFile('./page1.html');"
a href="#gpage" onclick="loadFile('./page2.html');"

It seems to work, but boy is it sluggish. My webpages load much faster in Chrome than they do on chromium via Electron. Any ideas why this is occuring?