Add back button when loading url in Electron

Question

I currently have elements in an Electron app of mine, that when clicking on them loads a url. However it is not possible to go to the previous (local) page.

Is there any way to add a layered back button on top of the external url which will load the previous page?

Answer 1

I haven't had a need to use it but there are navigation functions in the webContent instances:

contents.clearHistory()

Clears the navigation history.

contents.goBack()

Makes the browser go back a web page.

contents.goForward()

Makes the browser go forward a web page.

And so forth. So it looks like you can do what you want.

Answer 2

Here In your Page wherever Don't forget to

const electron = window.require('electron');
const { ipcRenderer } = electron;

App.js (or any page)

const goBack = async () => {
  // Async message sender
  ipcRenderer.send('goBackHomeBoi', 'Send Me Data Please')
  // Async message handler
  ipcRenderer.on('WentBack', (event, data) => {
    console.log(data)
  })
}

then you can have button on the page whose onClick binds to this funtion.

main.js (electron main)

 // Event handler for asynchronous incoming messages
ipcMain.on('goBackHomeBoi', async (event, arg) => {
    win.webContents.goBack()
    event.sender.send('WentBack', 'Done')
 })