IpcMain communication issue

I'm trying to change the src="" of a webview. My program are two html pages, in the page1 I have an Input that when you press enter or a button, go to next page (page2). So in Page2 I put a webview to make appear the result of the search of the text put in the input. To do that I used ipcRender and ipcMain, but the communication its not working. I have the 2 html files and 4 js files:

In the htmls I have the input and a button, and in the other html the webview To send the text of the input I have the input.js:

const searchBtn = document.getElementById('searchBtn');
const textInput = document.getElementById('text-input');

textInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
    search();
}
});

searchBtn.addEventListener('click', () => {
    search();
});

function search() {
    const query = textInput.value;
    ipcRenderer.send('search', query); // Send to index.js the query, I checked it with a console.log and its working, so I think here its not the problem
};

Oh, I had a trouble with = require('electron'); so I coded preload.js

contextBridge.exposeInMainWorld("app", API);


contextBridge.exposeInMainWorld('ipcRenderer', {
    send: (channel, data) => ipcRenderer.send(channel, data),
    on: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args)),
});

Then index.js it's who recive the signal of input.js

ipcMain.on('search', (event, query) => {
  const url = `https://www.google.com/search?q=${encodeURIComponent(query)}`; // With console.log I checked that the query it's being send
  
  BrowserWindow.getFocusedWindow().loadURL('file://' + __dirname + '/searchPage.html');
  
  event.sender.send('search-results', url); // Problem!!
});

The event.sender.send('search-results', url); I noticed that it's not sending the URL to search.js, that it's the code that should put the src:

const searchResults = document.querySelector('#searchResults'); // I checked with console.log and the webview it's being detected (<webview id="searchResults" style="position: absolute; width: 100%; height: 100%;"></webview>)

ipcRenderer.on('search-results', (event, results) => { // Here it's the problem
  if (searchResults && results) {
    searchResults.src = results;
  } else {
    console.error('Error: searchResults or results is undefined.');
  R
});

The promblem it's that the ipcMain it's not sending the signal to the ipcRenderer of search.js. I checked in search.js with a console.log the results variable but says undefined. I the dev console of electron didn't appear any error so I'm very confused. Also I tried with webcontent but isn't working.

Edit:

I'm using the lastest version of electron in windows 11.

I attach the 2 htmls I’m using:

searchMenu.html

searchPage.html:

For searchMenu I use listeners like:

input.js

const searchBtn = document.getElementById('searchBtn');
const textInput = document.getElementById('text-input');

textInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
    search();
}
});

searchBtn.addEventListener('click', () => {
    search();
});

function search() {
    const query = textInput.value;
    ipcRenderer.send('search', query);
};

Also I put here the my webpreferences:

    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      webviewTag: true,
      preload: path.join(__dirname, 'preload.js'),
      contentSecurityPolicy: "default-src 'self'",
    },

I did an analysis of my code and here it is:

In the last image, red refers to problems and the numbers are the order of actions. I figured that the event.sender.send doesn't work.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/nfDTGYI