Implement a postMessage function and an onMessage event for webviews … #9762

jacobp100 · 2016-09-06T09:30:02Z

JS API very similar to web workers and node's child process.

Work has been done by somebody else for the Android implementation over at #7020, so we'd need to have these in sync before anything gets merged.

I've made a prop messagingEnabled to be more explicit about creating globals—it might be sufficient to just check for an onMessage handler though.

ghost · 2016-09-06T09:31:09Z

By analyzing the blame information on this pull request, we identified @spicyj and @caabernathy to be potential reviewers.

eslint-bot · 2016-09-06T09:35:25Z

Examples/UIExplorer/js/WebViewExample.js

+  constructor() {
+    super();
+
+    this.state = { messagesReceivedFromWebView: 0 };


object literal This type is incompatible with undefined. Did you forget to declare type parameter State of property Component?

ghost · 2016-09-06T09:46:33Z

@jacobp100 updated the pull request - view changes

eslint-bot · 2016-09-06T10:04:18Z

Examples/UIExplorer/js/WebViewExample.js

+    return (
+      <View style={[styles.container, { height: 200 }]}>
+        <View style={styles.container}>
+          <Text>Messages received from web view: {messagesReceivedFromWebView}</Text>


react/no-string-refs: Using this.refs is deprecated.

ghost · 2016-09-06T10:16:18Z

@jacobp100 updated the pull request - view changes

facebook-github-bot · 2016-09-06T10:19:15Z

@jacobp100 updated the pull request - view changes

eslint-bot · 2016-09-06T10:51:02Z

Examples/UIExplorer/js/WebViewExample.js

+
+  onMessage = () => this.setState(state => ({
+    messagesReceivedFromWebView: state.messagesReceivedFromWebView + 1,
+  }))


call of method postMessage Method cannot be called on possibly null value null

ghost · 2016-09-06T12:35:50Z

@jacobp100 updated the pull request - view changes

eslint-bot · 2016-09-06T12:49:51Z

Examples/UIExplorer/js/WebViewExample.js

@@ -217,6 +217,49 @@ class ScaledWebView extends React.Component {
  }
 }

+class MessagingTest extends React.Component {
+  webview = null


curly: Expected { after 'if' condition.

ghost · 2016-09-06T13:08:34Z

@jacobp100 updated the pull request - view changes

ghost · 2016-09-06T13:12:00Z

@jacobp100 updated the pull request - view changes

mkonicek · 2016-09-08T14:30:45Z

Thanks for the PR! It's very large so might take some time to review. I asked about opinions here as I don't use WebView: https://www.facebook.com/groups/reactnativeoss/permalink/1588566434773318

mkonicek · 2016-09-08T14:33:01Z

@jacobp100 If we go ahead with this approach it will be possible to implement the exact same API on Android, correct? Would you be up for doing that after or do you know anyone who would? :)

mkonicek · 2016-09-08T14:35:29Z

Let's wait if someone with iOS experience jumps in to review - I have little.

fungilation · 2016-11-08T14:25:35Z

I'm looking at this in 0.37. I'm using
https://github.com/alinz/react-native-webview-bridge. This looks like a
complete replacement?

On Tue, Nov 8, 2016 at 5:32 AM David Perrenoud notifications@github.com
wrote:

Now available in React Native v0.37.0
https://github.com/facebook/react-native/releases/tag/v0.37.0!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#9762 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADoJSpkxcZVc6m-ozE01bXJ7TEgkuVvbks5q8HnmgaJpZM4J1o5Z
.

jacobp100 · 2016-11-08T14:45:28Z

You’ll have to change the webview’s JS a little, but otherwise it works the same.

bengoism · 2016-11-10T13:24:47Z

I keep getting the following error:

"Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined".

How do I handle the scenario where the visited webpage already has a declared a window.postMessage function?

mlostekk · 2016-11-10T13:51:41Z

@jacobp100 can you explain which JS changes have to be made?

jacobp100 · 2016-11-10T13:54:38Z

You should be able to use injectedJavaScript=“window.postMessage = null”.

mlostekk · 2016-11-10T14:28:05Z

I am trying to re-implement this example here

https://facebook.github.io/react-native/docs/webview.html

but i cannot find the file

messagingtest.html

from

source={require('./messagingtest.html')}

Can you post the content here?

bengoism · 2016-11-10T14:32:38Z

@jacobp100: But after assigning null to window.postMessage I get the following error when trying to send a message window.postMessage is not a function, window.postMessage is null .. which kinda makes sense since my injected javscript in short looks like this

window.postMessage = null;
...
window.postMessage("hello");

bengoism · 2016-11-10T14:35:17Z

@mlostekk
https://github.com/facebook/react-native/blob/abb8ea3aea686e2cd881a61fbc66d137857ef422/Examples/UIExplorer/js/messagingtest.html

jacobp100 · 2016-11-10T14:50:54Z

@bengoism

window.postMessage = null;
setTimeout(() => { window.postMessage(‘hello’); });

It might be worth revisiting this. My view was just that we should override the value, and document that behaviour.

bengoism · 2016-11-10T14:57:47Z

@mlostekk:

Basically you should change the following on the client

window.WebViewBridge.send("hello"); 
to 
window.postMessage("hello")

  window.WebViewBridge.onMessage = function(message) {
    alert(message);
  }
  to 
  document.addEventListener('message', function(event){
    alert(event.data)
  })

fungilation · 2016-11-15T08:52:44Z

I'm constantly getting:
Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined

I have window.postMessage = null; as the first line in WebView.injectedJavaScript. The error shows up after form submission and page reloads. Initial page load is fine in the WebView.

Is there a way around this, or is this a bug? The error seems self contradictory anyway. If there is a previous value of postMessage, it would/should be overridden as the error says. But if it is, why is there the error in the first place if postMessage is simply replaced?

malinthe · 2016-11-18T06:17:31Z

I'm also constantly getting the Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined error message, but this only happens when there's an iframe embed in the html view. Any idea why?

jacobp100 · 2016-11-18T07:37:33Z

See #10941

fungilation · 2016-11-19T00:55:23Z

This is better. Though why overlap and break pages that already use window.postMessage, when RN can use a different name? Say, window.rnPostMessage. Then this issue of namespace collision is sidestepped, and original webpages that uses window.postMessage can load on page without breakage.

Otherwise, we could inject JS to run at precise the right moment (right after postMessage got moved to originalPostMessage), just to undo this RN behaviour by:

window.rnPostMessage = window.postMessage
window.postMessage = window.originalPostMessage

This would seem counter-productive at best, if not prone to breakage still as the above would need to be run at precisely the right moment after RN's replacement of window.postMessage? Original page's code would break if it calls window.postMessage that's RN's replacement instead of the real original.

satya164 · 2016-11-19T10:39:49Z

Since people are having issues now, how about revisiting the decision and doing something like this?

window.postMessage = function(message, targetOrigin, transfer) {
  if (targetOrigin != 'self') {
    window.originalPostMessage(message, targetOrigin, transfer);
  }
  bridge.postMessage(message);
}

i.e. always requiring targetOrigin to be specified. At least it'll not be hacky like current workarounds.

satya164 · 2016-11-19T10:41:19Z

Though why overlap and break pages that already use window.postMessage, when RN can use a different name

#9762 (comment)

We don't have to break pages really. It's just the current implementation.

mkonicek · 2016-11-22T16:05:54Z

Can anyone running into issues submit a PR with a fix? We don't use this API internally so can't provide much feedback.

jacobp100 · 2016-11-22T17:05:30Z

Can all issues be added to #10941, and this PR be closed from further comments?

Summary: Currently, < WebView > allows you to pass JS to execute within the view. This works great, but there currently is not a way to execute JS after the page is loaded. We needed this for our app. We noticed that the WebView had messaging support added (see #9762) . Initially, this seemed like more than enough functionality for our use case - just write a function that's injected on initial load that accepts a message with JS, and `eval()` it. However, this broke once we realized that Content Security Policy can block the use of eval on pages. The native methods iOS provide to inject JS allow you to inject JS without CSP interfering. So, we just wrapped the native methods on iOS (and later Android) and it worked for our use case. The method injectJavaScript was born. Now, after I wrote this code, I realized that #8798 exists and hadn't been merged because of a lack of tests. I commend what was done in #8798 as it sorely solves a problem (injecting JS after the initial load) and has more features than what I' Closes #11358 Differential Revision: D4390425 fbshipit-source-id: 02813127f8cf60fd84229cb26eeea7f8922d03b3

Summary: Currently, < WebView > allows you to pass JS to execute within the view. This works great, but there currently is not a way to execute JS after the page is loaded. We needed this for our app. We noticed that the WebView had messaging support added (see facebook#9762) . Initially, this seemed like more than enough functionality for our use case - just write a function that's injected on initial load that accepts a message with JS, and `eval()` it. However, this broke once we realized that Content Security Policy can block the use of eval on pages. The native methods iOS provide to inject JS allow you to inject JS without CSP interfering. So, we just wrapped the native methods on iOS (and later Android) and it worked for our use case. The method injectJavaScript was born. Now, after I wrote this code, I realized that facebook#8798 exists and hadn't been merged because of a lack of tests. I commend what was done in facebook#8798 as it sorely solves a problem (injecting JS after the initial load) and has more features than what I' Closes facebook#11358 Differential Revision: D4390425 fbshipit-source-id: 02813127f8cf60fd84229cb26eeea7f8922d03b3

Implement a postMessage function and an onMessage event for webviews … Summary: JS API very similar to web workers and node's child process. Work has been done by somebody else for the Android implementation over at facebook#7020, so we'd need to have these in sync before anything gets merged. I've made a prop `messagingEnabled` to be more explicit about creating globals—it might be sufficient to just check for an onMessage handler though. ![screen shot 2016-09-06 at 10 28 23](https://cloud.githubusercontent.com/assets/7275322/18268669/b1a12348-741c-11e6-91a1-ad39d5a8bc03.png) Closes facebook#9762 Differential Revision: D4008260 fbshipit-source-id: 84b1afafbc0ab1edc3dfbf1a8fb870218e171a4c

Summary: JS API very similar to web workers and node's child process. Work has been done by somebody else for the Android implementation over at facebook#7020, so we'd need to have these in sync before anything gets merged. I've made a prop `messagingEnabled` to be more explicit about creating globals—it might be sufficient to just check for an onMessage handler though. ![screen shot 2016-09-06 at 10 28 23](https://cloud.githubusercontent.com/assets/7275322/18268669/b1a12348-741c-11e6-91a1-ad39d5a8bc03.png) Closes facebook#9762 Differential Revision: D4008260 fbshipit-source-id: 84b1afafbc0ab1edc3dfbf1a8fb870218e171a4c

ghost added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Sep 6, 2016

eslint-bot reviewed Sep 6, 2016
View reviewed changes

ghost added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 6, 2016

eslint-bot reviewed Sep 6, 2016
View reviewed changes

ghost added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 6, 2016

eslint-bot reviewed Sep 6, 2016
View reviewed changes

ghost added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 6, 2016

eslint-bot reviewed Sep 6, 2016
View reviewed changes

ghost added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 6, 2016

mkonicek assigned majak and unassigned majak Sep 8, 2016

svbatalov mentioned this pull request Nov 11, 2016

[WebView] Message passing between WebView / Javascript #586

Closed

ezyone123 mentioned this pull request Dec 2, 2016

WebViewBridge bug?? alinz/react-native-webview-bridge#154

Closed

worm-emoji mentioned this pull request Dec 8, 2016

Add a injectJavaScript method to the WebView component #11358

Closed

fungilation mentioned this pull request Mar 15, 2018

Use WKWebView instead of UIWebView #321

Closed

This was referenced Aug 21, 2018

0.57.0 Discussion react-native-community/releases#34

Closed

Proposal 0001 - Extract WebView From Core react-native-community/discussions-and-proposals#3

Merged

fungilation mentioned this pull request Sep 29, 2018

[DISCUSS] Cross platform API for RN<>WebView 2-way RPC/message passing react-native-webview/react-native-webview#66

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement a postMessage function and an onMessage event for webviews … #9762

Implement a postMessage function and an onMessage event for webviews … #9762

jacobp100 commented Sep 6, 2016 •

edited

Loading

ghost commented Sep 6, 2016

eslint-bot Sep 6, 2016

ghost commented Sep 6, 2016

eslint-bot Sep 6, 2016

ghost commented Sep 6, 2016

facebook-github-bot commented Sep 6, 2016

eslint-bot Sep 6, 2016

ghost commented Sep 6, 2016

eslint-bot Sep 6, 2016

ghost commented Sep 6, 2016

ghost commented Sep 6, 2016

mkonicek commented Sep 8, 2016

mkonicek commented Sep 8, 2016

mkonicek commented Sep 8, 2016

fungilation commented Nov 8, 2016

jacobp100 commented Nov 8, 2016

bengoism commented Nov 10, 2016

mlostekk commented Nov 10, 2016

jacobp100 commented Nov 10, 2016 •

edited

Loading

mlostekk commented Nov 10, 2016

bengoism commented Nov 10, 2016

bengoism commented Nov 10, 2016

jacobp100 commented Nov 10, 2016 •

edited

Loading

bengoism commented Nov 10, 2016

fungilation commented Nov 15, 2016 •

edited

Loading

malinthe commented Nov 18, 2016

jacobp100 commented Nov 18, 2016

fungilation commented Nov 19, 2016

satya164 commented Nov 19, 2016

satya164 commented Nov 19, 2016 •

edited

Loading

mkonicek commented Nov 22, 2016

jacobp100 commented Nov 22, 2016

Implement a postMessage function and an onMessage event for webviews … #9762

Implement a postMessage function and an onMessage event for webviews … #9762

Conversation

jacobp100 commented Sep 6, 2016 • edited Loading

ghost commented Sep 6, 2016

eslint-bot Sep 6, 2016

Choose a reason for hiding this comment

ghost commented Sep 6, 2016

eslint-bot Sep 6, 2016

Choose a reason for hiding this comment

ghost commented Sep 6, 2016

facebook-github-bot commented Sep 6, 2016

eslint-bot Sep 6, 2016

Choose a reason for hiding this comment

ghost commented Sep 6, 2016

eslint-bot Sep 6, 2016

Choose a reason for hiding this comment

ghost commented Sep 6, 2016

ghost commented Sep 6, 2016

mkonicek commented Sep 8, 2016

mkonicek commented Sep 8, 2016

mkonicek commented Sep 8, 2016

fungilation commented Nov 8, 2016

jacobp100 commented Nov 8, 2016

bengoism commented Nov 10, 2016

mlostekk commented Nov 10, 2016

jacobp100 commented Nov 10, 2016 • edited Loading

mlostekk commented Nov 10, 2016

bengoism commented Nov 10, 2016

bengoism commented Nov 10, 2016

jacobp100 commented Nov 10, 2016 • edited Loading

bengoism commented Nov 10, 2016

fungilation commented Nov 15, 2016 • edited Loading

malinthe commented Nov 18, 2016

jacobp100 commented Nov 18, 2016

fungilation commented Nov 19, 2016

satya164 commented Nov 19, 2016

satya164 commented Nov 19, 2016 • edited Loading

mkonicek commented Nov 22, 2016

jacobp100 commented Nov 22, 2016

jacobp100 commented Sep 6, 2016 •

edited

Loading

jacobp100 commented Nov 10, 2016 •

edited

Loading

jacobp100 commented Nov 10, 2016 •

edited

Loading

fungilation commented Nov 15, 2016 •

edited

Loading

satya164 commented Nov 19, 2016 •

edited

Loading