WebView inject javascript before window.onload

Description

When using the WebView API to communicate over postMessage and inject Javascript using the injectedJavaScript prop, the webpage has to wait until window.onload.

In the example, if you run window.postMessage('"Hello" from the web view'); without waiting for the button click, you will see an exception because React Native hasn’t injected postMessage yet.

Solution

Not sure about the specifics, but ideally the React Native injected code would run before the document javascript runs.

Additional Information

react-native-cli: 2.0.1 react-native: 0.43.2 ProductName: Mac OS X ProductVersion: 10.12.3 BuildVersion: 16D32 Xcode 8.3 Build version 8E162

[faceach]

As React Native use UIWebView, I think you can’t inject JavaScript before WebView loading finished.

But in WKWebView, you can inject JavaScript at document start via API: - (instancetype)initWithSource:(NSString *)source injectionTime:(WKUserScriptInjectionTime)injectionTime forMainFrameOnly:(BOOL)forMainFrameOnly; - (void)addUserScript:(WKUserScript *)userScript;

[carsonwah]

Experiencing the same problem. RN:

<WebView
  onMessage={this.handleMessage}
  source={{uri: url}} />

html js:

window.postMessage('hello');

It won’t work.

So, I use this workaround:

setInterval(() => {window.postMessage('hello');}, 500)

Another issue talking about this: https://github.com/facebook/react-native/issues/11594