Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Callback onMessage should use iframe ref #37

Open
luis-si opened this issue Dec 24, 2020 · 1 comment
Open

Callback onMessage should use iframe ref #37

luis-si opened this issue Dec 24, 2020 · 1 comment

Comments

@luis-si
Copy link

luis-si commented Dec 24, 2020

Hello. My use case is multiple WebViews per screen, and each posting messages (separately) to track their content height.

Turns out:

  • window.ReactNativeWebView.postMessage (inside iframe) fails, whereas this is the correct way for Android/iOS
  • using window.postMessage (inside iframe) with onMessage={listen} won't propagate
  • using window.parent.postMessage (inside iframe) with onMessage={listen} works, BUT you can't tell between instancess (unless you pass some guid back and forth)

Proposal:
Instead of window.addEventListener('message', this.onMessage, true); use this.frameRef.contentWindow.addEventListener('message', this.onMessage, true);
(see this topic https://stackoverflow.com/questions/10338344/html5-setting-onmessage-handler-for-iframe-in-parent-script)

Additionally, put window.ReactNativeWebView = window or something similar.

@Cogneter
Copy link

Cogneter commented Jun 3, 2022

I'm in exactly the same situation - multiple WebViews that need to separately track their heights through postMessage (using https://github.com/iou90/react-native-autoheight-webview for that purpose).

I managed to make postMessage calls in react-native-autoheight-webview work thanks to advice from this comment: #55. But, as noted, window.parent.postMessage equally affects all WebViews, so they get set the same height, which is incorrect.

I'm now working towards passing a guid for identification, but it would be nice if react-native-web-webview just worked out of the box. I tried replacing window.addEventListener with this.frameRef.contentWindow.addEventListener as suggested, but that didn't work for me.

Could someone please make a Pull Request with a fix?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants