CODEWITHSUNDEEP
javascripthtmlelectron
Jadon Erwin
Jadon Erwin

Reputation: 651

How to use electron tabs webview as to communicate from browser window to tabs?

I am trying to have my communicate between different rendering processes in electron. Rather than have multiple windows I am using electron-tabs which can be found here. To start I simply want my main window to be able to send a message using ipcRenderer to each tab. With multiple windows, you could store each window in a global variable like this stack overflow question and then use the web-contents to send a message.

UPDATE: In the electron-tabs documentation, it suggests you can use the tabs webview the same as you would a windows web-contents (see here). Unfortunately, either I am missing something or it is a little more complicated.

enter image description here

For the code: I have a main window mainWindow.html

<html>
<head></head>
<body>
<div class="etabs-tabgroup" >
  <div class="etabs-tabs" ></div>
  <div class="etabs-buttons" style="padding:5px 0px"></div>
</div>
<div class="etabs-views"></div>
<link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">

<script>
const TabGroup = require('electron-tabs') ;
const electron = require('electron') ;
const {ipcRenderer} = electron;

var tabs = [];

// Create a new tabGroup
let tabGroup = new TabGroup();

// Add 3 tabs to tabGroup
for (var i = 0; i <3;i++){
    tabs.push(tabGroup.addTab({
        src: 'file://' + __dirname + '/tab.html',
        webviewAttributes: {
            nodeintegration: true
        }
    }));

    // Send test message to tabs... !!!! DOES NOT WORK !!!!
    circuitTabs[i].webview.send('testMessage',i);
}
</script>
</html>

tab.html

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  </head>
  <body>
      <script>
        const electron = require('electron') ;
        const {ipcRenderer} = electron;
        const { remote } = require('electron');

        ipcRenderer.on ('testMessage', (event, i) => { alert(`Message from main window to tab ${i}`); });

      </script>
  </body>
  </html>

main.js

const electron = require('electron');
const {app, BrowserWindow} = electron;

let mainWindow = null;

app.on('ready', function () {
    mainWindow = new electron.BrowserWindow({width: 1200,height: 800,
    webPreferences: {
    nodeIntegration: true,
    webviewTag: true
    }
});

mainWindow.loadURL(path.join(__dirname, '/mainWindow.html'));
mainWindow.on('ready-to-show', function () {
    mainWindow.show();
    mainWindow.focus();
});

Upvotes: 1

Views: 6143

Answers (2)

Jadon Erwin
Jadon Erwin

Reputation: 651

I figured it out. You can get the webcontentsID from the tab and use ipcRenderer.sendTo function.

For the code: I have a main window mainWindow.html

<html>
<head></head>
<body>
<div class="etabs-tabgroup" >
  <div class="etabs-tabs" ></div>
  <div class="etabs-buttons" style="padding:5px 0px"></div>
</div>
<div class="etabs-views"></div>
<link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">

<script>
const TabGroup = require('electron-tabs') ;
const electron = require('electron') ;
const {ipcRenderer} = electron;

var tabs = [];

// Create a new tabGroup
let tabGroup = new TabGroup();

// Add 3 tabs to tabGroup
for (var i = 0; i <3;i++){
    tabs.push(tabGroup.addTab({
        src: 'file://' + __dirname + '/tab.html',
        webviewAttributes: {
            nodeintegration: true
        }
    }));

    // Send test message to tabs...
    var webContentsID = tabs[i].webview.getWebContentsId();
    ipcRenderer.sendTo(webContentsID,'testMessage');
}
</script>
</html>

tab.html

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  </head>
  <body>
      <script>
        const electron = require('electron') ;
        const {ipcRenderer} = electron;
        const { remote } = require('electron');

        ipcRenderer.on ('testMessage', (event, i) => { alert(`Message from main window to tab ${i}`); });

      </script>
  </body>
  </html>

main.js

const electron = require('electron');
const {app, BrowserWindow} = electron;

let mainWindow = null;

app.on('ready', function () {
    mainWindow = new electron.BrowserWindow({width: 1200,height: 800,
    webPreferences: {
    nodeIntegration: true,
    webviewTag: true
    }
});

mainWindow.loadURL(path.join(__dirname, '/mainWindow.html'));
mainWindow.on('ready-to-show', function () {
    mainWindow.show();
    mainWindow.focus();
});

Upvotes: 4

Zaphod
Zaphod

Reputation: 568

Try following this:

<webview>.send(channel, ...args)

channel String
...args any[]

Returns Promise<void>

Send an asynchronous message to renderer process via channel, you can also send arbitrary arguments. The renderer process can handle the message by listening to the channel event with the ipcRenderer module.

See webContents.send for examples.

Look at the docs below for more information.

https://www.electronjs.org/docs/api/webview-tag#webviewsendchannel-args

Upvotes: 1

Related Questions