Listening to postMessage Not Working | electronjs.org | Page 1

carmine pollen Mar 5, 2023, 10:12 AM

#

I have a library which sends postMessage to window.ReactNativeWebView object, like this:
Generic Example: window.ReactNativeWebView.postMessage(JSON.stringify({ command, ...(options || {}) }))

In my electron app, I want to create a ReactNativeWebView object on window object, and then listen to the messages sent by the library like this:
window.ReactNativeWebView.addEventListener();

So far I've tried so many ways and nothing seems to work. Can anyone help?

split panther Mar 5, 2023, 10:30 AM

#

What exactly does not work?

carmine pollen Mar 5, 2023, 11:20 AM

#

When there is a postMessage sent, the listener doesn't listen. 😦
There is no error either.

#

When I send window.ReactNativeWebView.postMessage("Some message"); from my electron app directly, it works.
But when my library sends the same window.ReactNativeWebView.postMessage("Some message"); the listeners aren't triggered.

The library is inside an iframe which I'm embedding in my electron app as webview.

split panther Mar 5, 2023, 11:23 AM

#

iframe as webview?

carmine pollen Mar 5, 2023, 11:23 AM

#

yes.

split panther Mar 5, 2023, 11:23 AM

#

and what ReactNativeWebView is?

carmine pollen Mar 5, 2023, 11:23 AM

#

Actually. Its an external webpage which embeds the iframe.

split panther Mar 5, 2023, 11:23 AM

#

do you have access to iframe?

carmine pollen Mar 5, 2023, 11:24 AM

#

yes ..

split panther Mar 5, 2023, 11:24 AM

#

i dont think so

#

if you send postMessage you send it to webview

#

so iframe dont know anything about it

carmine pollen Mar 5, 2023, 11:25 AM

#

actually I never send a postMessage. I only want to listen to the postMessage sent by the iframe.

#

iframe sends this message:
window.ReactNativeWebView.postMessage("Some message");

split panther Mar 5, 2023, 11:25 AM

#

what is ReactNativeWebView?

carmine pollen Mar 5, 2023, 11:27 AM

#

It does all these inside a mobile app.
The mobile app is build in ReactNative.

But I'm building a simulator electron app where people can use it to debug their app.
So I do not have ReactNativeWebView in electron. So I just want to create a ReactNativeWebView object on window object and listen to the postMessage from the iframe and simulate the behaviour.

split panther Mar 5, 2023, 11:27 AM

#

webview is another browserwindow

carmine pollen Mar 5, 2023, 11:28 AM

#

What I'm doing in electron is: I've embedded an iframe and named it as ReactNativeWebView. And just trying to listen to the postMessage from the iframe.

split panther Mar 5, 2023, 11:28 AM

#

so you have browserwindow inside of browserwindow with iframe in it

carmine pollen Mar 5, 2023, 11:28 AM

#

there is a webview inside browserwindow. The webview has an iframe in it.

split panther Mar 5, 2023, 11:28 AM

#

webview is browserwindow as well

carmine pollen Mar 5, 2023, 11:29 AM

#

But I'm successfully able to output the logs of the iframe inside webview.

split panther Mar 5, 2023, 11:29 AM

#

now you need to resend it to parent window i suppose

carmine pollen Mar 5, 2023, 11:29 AM

#

webview is browserwindow as well
No. I'm just using webview tag and putting the URL in src field.
So there is only one browserWindow and inside that I'm having webview tag.

split panther Mar 5, 2023, 11:30 AM

#

webview is independend browser view

carmine pollen Mar 5, 2023, 11:30 AM

#

yes.

split panther Mar 5, 2023, 11:30 AM

#

just like iframe but as separeate process

carmine pollen Mar 5, 2023, 11:30 AM

#

yes.

split panther Mar 5, 2023, 11:30 AM

#

and it behave as independend browser window

#

or tab

carmine pollen Mar 5, 2023, 11:31 AM

#

webview is independend browser view
It's an external URL. Which embeds another external URL as iframe!!

split panther Mar 5, 2023, 11:31 AM

#

with independend dom tree

carmine pollen Mar 5, 2023, 11:31 AM

#

yes I suppose, as they are external URLs.

split panther Mar 5, 2023, 11:31 AM

#

do you have anything in webview devtools?

carmine pollen Mar 5, 2023, 11:31 AM

#

My understanding was, if I create an object on window object and if any of the iframe our domain sends a postMessage, any of the windows can listen to it. No?

#

do you have anything in webview devtools?
Yes. It shows all the libraries loading status and all the console logs etc.

#

So let me summaries:
I've a browserWindow, in which there is a webview(external URL), which in turn has iframe(which is also an external URL for the webview). Now the iframe sends window.ReactNativeWebView.postMessage("Some message");

How do I listen to it in my renderer process of electron app?

split panther Mar 5, 2023, 11:34 AM

#

you need to resend it to parent window

carmine pollen Mar 5, 2023, 11:35 AM

#

Can you please tell me how to do that. I'm really new to this. And have been trying different ways. I don't know how to send it to parent window now. 😦

#

window.parent.postMessage ?

split panther Mar 5, 2023, 11:36 AM

#

with making ipc bridge

#

from webview to parent window

carmine pollen Mar 5, 2023, 11:36 AM

#

How can I achieve this inside my electron app alone, without modifying webview or iframe.

split panther Mar 5, 2023, 11:36 AM

#

dont know

carmine pollen Mar 5, 2023, 11:37 AM

#

Ok ..

#

Thank you for thinking through with me.

split panther Mar 5, 2023, 11:37 AM

#

loading preload file into webview

#

https://www.electronjs.org/docs/latest/tutorial/message-ports/

MessagePorts in Electron | Electron

MessagePorts are a web feature that allow passing messages between different contexts. It's like window.postMessage, but on different channels. The goal of this document is to describe how Electron extends the Channel Messaging model, and to give some examples of how you might use MessagePorts in your app.

carmine pollen Mar 5, 2023, 11:38 AM

#

loading preload file into webview
How is that possible? 🤔

webview is an external URL.

split panther Mar 5, 2023, 11:38 AM

#

you can load local file into browser window/webview tag as preload file

carmine pollen Mar 5, 2023, 11:38 AM

#

split panther https://www.electronjs.org/docs/latest/tutorial/message-ports/

Thank you for this link. I'll do some more trial and error now.

split panther Mar 5, 2023, 11:39 AM

#

https://www.electronjs.org/docs/latest/api/webview-tag#preload

`` Tag | Electron

Electron's webview tag is based on Chromium's webview, which is undergoing dramatic architectural changes. This impacts the stability of webviews, including rendering, navigation, and event routing. We currently recommend to not use the webview tag and to consider alternatives, like iframe, Electron's BrowserView, or an architecture that avoids ...

carmine pollen Mar 5, 2023, 11:39 AM

#

split panther https://www.electronjs.org/docs/latest/api/webview-tag#preload

Oh this looks something now. Maybe I can use this.

#

Do you know how I can forward the postMessage to parent window?

split panther Mar 5, 2023, 11:41 AM

#

https://www.electronjs.org/docs/latest/tutorial/message-ports/#example-use-cases

MessagePorts in Electron | Electron

MessagePorts are a web feature that allow passing messages between different contexts. It's like window.postMessage, but on different channels. The goal of this document is to describe how Electron extends the Channel Messaging model, and to give some examples of how you might use MessagePorts in your app.

#Listening to postMessage Not Working