How to refresh current tab content on click of menu

pankajitengg commented 1 year ago

I am new to Electron JS. I just created an application which use 2 tab in window and both of the tabs open a url (google.com and amazon.in). In Menu I have a Home Button. On click of home, I need to reload the home url of that active tab.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Dummy</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <tab-group new-tab-button="true" sortable="true"></tab-group>

<script src="../node_modules/electron-tabs/dist/electron-tabs.js"></script>
<script>
  const tabGroup = document.querySelector("tab-group");

  tabGroup.addTab({
    title: "Google",
    src: "https://www.google.com/",
    active: true,  
    closable : false,
  });  

  tabGroup.addTab({
    title: "Amazon",
    src: "https://amazon.com/"  ,
    closable : false,
  });
</script>
  </body>
</html>

index.js

const { Console } = require('console');
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');

app.disableHardwareAcceleration();
app.commandLine.appendSwitch("disable-software-rasterizer");

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {

  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1024,
    height: 600,
    useContentSize:true,
    webPreferences: {
      webviewTag: true,  
    },
  });

  // custom menu and their event
  let menuTemplate = [
    {
        label: "File",
        submenu: [
            { label: "Close",
          click:function(){
            app.exit(0);
          }
        }
        ]
    },
    {
        label : "Home",
        click:function(){
          mainWindow.reload();
        }
      }  
  ];

  // and load the index.html of the app.
  mainWindow.setMenu(null);
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  //load the custom menu
  let menu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(menu);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

pankajitengg commented 1 year ago

Can someone please guide me , how can I achieve this .

brrd commented 1 year ago

I'm sorry, we don't offer support about Electron here. You should probably check the Electron community instead: https://www.electronjs.org/community

Tabs are basically a wrapper around Electron webviews, so I advise you to refer to the related documentation (especially the part about the reload method).

The menu question is related to the communication between processes, so it is definitely out of the scope of our project.

ghost commented 1 year ago

You could easily add a button trigger like Ctrl + R that reloads the active WebView. A script to reload the active webview would look like this as an example:

document.querySelector("body > tab-group").shadowRoot.querySelector("div > div > webview.visible").reload()

https://sudovanilla.com/code/Korbs/Penpot-Desktop/src/branch/main/src/process/extra/Menu.js#L77-L81

brrd / electron-tabs

How to refresh current tab content on click of menu #187