From f85e5d8434b47e053a2da154876f1279b8365357 Mon Sep 17 00:00:00 2001 From: Luke Miles Date: Tue, 6 Dec 2016 18:23:41 -0800 Subject: [PATCH 01/13] Add injectJavaScript function for iOS webviews --- Libraries/Components/WebView/WebView.ios.js | 12 ++++++++++++ React/Views/RCTWebView.h | 1 + React/Views/RCTWebView.m | 5 +++++ React/Views/RCTWebViewManager.m | 12 ++++++++++++ 4 files changed, 30 insertions(+) diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js index 7961d777f7fc..5fe2035d7472 100644 --- a/Libraries/Components/WebView/WebView.ios.js +++ b/Libraries/Components/WebView/WebView.ios.js @@ -489,6 +489,18 @@ class WebView extends React.Component { ); }; + /** + * Injects Javascript into the currently + * running view. + */ + injectJavaScript = (data) => { + UIManager.dispatchViewManagerCommand( + this.getWebViewHandle(), + UIManager.RCTWebView.Commands.injectJavaScript, + [String(data)] + ); + }; + /** * We return an event with a bunch of fields including: * url, title, loading, canGoBack, canGoForward diff --git a/React/Views/RCTWebView.h b/React/Views/RCTWebView.h index e4f57567d3a3..92e9c6bb7ea7 100644 --- a/React/Views/RCTWebView.h +++ b/React/Views/RCTWebView.h @@ -43,5 +43,6 @@ shouldStartLoadForRequest:(NSMutableDictionary *)request - (void)reload; - (void)stopLoading; - (void)postMessage:(NSString *)message; +- (void)injectJavaScript:(NSString *)script; @end diff --git a/React/Views/RCTWebView.m b/React/Views/RCTWebView.m index 23fe37b84dca..7220fddeb8b3 100644 --- a/React/Views/RCTWebView.m +++ b/React/Views/RCTWebView.m @@ -96,6 +96,11 @@ - (void)postMessage:(NSString *)message [_webView stringByEvaluatingJavaScriptFromString:source]; } +- (void)injectJavaScript:(NSString *)script +{ + [_webView stringByEvaluatingJavaScriptFromString:script]; +} + - (void)setSource:(NSDictionary *)source { if (![_source isEqualToDictionary:source]) { diff --git a/React/Views/RCTWebViewManager.m b/React/Views/RCTWebViewManager.m index 2730124fffa2..ddc66e2b8f13 100644 --- a/React/Views/RCTWebViewManager.m +++ b/React/Views/RCTWebViewManager.m @@ -111,6 +111,18 @@ - (UIView *)view }]; } +RCT_EXPORT_METHOD(injectJavaScript:(nonnull NSNumber *)reactTag script:(NSString *)script) +{ + [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry) { + RCTWebView *view = viewRegistry[reactTag]; + if (![view isKindOfClass:[RCTWebView class]]) { + RCTLogError(@"Invalid view returned from registry, expecting RCTWebView, got: %@", view); + } else { + [view injectJavaScript:script]; + } + }]; +} + #pragma mark - Exported synchronous methods - (BOOL)webView:(__unused RCTWebView *)webView From 55d38af0170415c9cba7a4ce91aa0dc03ccaeddf Mon Sep 17 00:00:00 2001 From: Luke Miles Date: Wed, 7 Dec 2016 16:20:35 -0800 Subject: [PATCH 02/13] Add android support for webview JS injection --- Libraries/Components/WebView/WebView.android.js | 8 ++++++++ .../facebook/react/views/webview/ReactWebViewManager.java | 8 +++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js index 4617b2cb6a73..bf326bd96cac 100644 --- a/Libraries/Components/WebView/WebView.android.js +++ b/Libraries/Components/WebView/WebView.android.js @@ -286,6 +286,14 @@ class WebView extends React.Component { ); }; + injectJavaScript = (data) => { + UIManager.dispatchViewManagerCommand( + this.getWebViewHandle(), + UIManager.RCTWebView.Commands.injectJavaScript, + [String(data)] + ); + }; + /** * We return an event with a bunch of fields including: * url, title, loading, canGoBack, canGoForward diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java index 650701851877..73412959d3c5 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java @@ -95,6 +95,7 @@ public class ReactWebViewManager extends SimpleViewManager { public static final int COMMAND_RELOAD = 3; public static final int COMMAND_STOP_LOADING = 4; public static final int COMMAND_POST_MESSAGE = 5; + public static final int COMMAND_INJECT_JAVASCRIPT = 6; // Use `webView.loadUrl("about:blank")` to reliably reset the view // state and release page resources (including any running JavaScript). @@ -477,7 +478,9 @@ protected void addEventEmitters(ThemedReactContext reactContext, WebView view) { "goForward", COMMAND_GO_FORWARD, "reload", COMMAND_RELOAD, "stopLoading", COMMAND_STOP_LOADING, - "postMessage", COMMAND_POST_MESSAGE); + "postMessage", COMMAND_POST_MESSAGE, + "injectJavaScript", COMMAND_INJECT_JAVASCRIPT + ); } @Override @@ -504,6 +507,9 @@ public void receiveCommand(WebView root, int commandId, @Nullable ReadableArray throw new RuntimeException(e); } break; + case COMMAND_INJECT_JAVASCRIPT: + root.loadUrl("javascript:" + args.getString(0); + break; } } From 3e821177e6e53ea6865daba252a43b68a1295d5c Mon Sep 17 00:00:00 2001 From: Luke Miles Date: Wed, 7 Dec 2016 16:34:40 -0800 Subject: [PATCH 03/13] Fix typo: close parentheses --- .../com/facebook/react/views/webview/ReactWebViewManager.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java index 73412959d3c5..9671dac654e1 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java @@ -508,7 +508,7 @@ public void receiveCommand(WebView root, int commandId, @Nullable ReadableArray } break; case COMMAND_INJECT_JAVASCRIPT: - root.loadUrl("javascript:" + args.getString(0); + root.loadUrl("javascript:" + args.getString(0)); break; } } From 00c03f5ef4fdb6654b7f4bf2dbd9efca186321c7 Mon Sep 17 00:00:00 2001 From: Luke Miles Date: Thu, 8 Dec 2016 12:40:52 -0800 Subject: [PATCH 04/13] Add test for injectJS to UIExplorer --- Examples/UIExplorer/js/WebViewExample.js | 39 +++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/Examples/UIExplorer/js/WebViewExample.js b/Examples/UIExplorer/js/WebViewExample.js index be1fb44aec11..1d1283c1dd22 100644 --- a/Examples/UIExplorer/js/WebViewExample.js +++ b/Examples/UIExplorer/js/WebViewExample.js @@ -264,6 +264,39 @@ class MessagingTest extends React.Component { } } +class InjectJS extends React.Component { + webview = null; + injectJS = () => { + const script = ` + var colors = ['green', 'red', 'blue', 'purple', 'yellow']; + var color = colors[Math.floor(Math.random() * colors.length)]; + document.body.style.backgroundColor = color; + `; + if (this.webview) { + this.webview.injectJavaScript(script); + } + } + render() { + return ( + + { this.webview = webview; }} + style={{ + backgroundColor: BGWASH, + height: 300, + }} + source={{uri: 'https://www.google.com'}} + scalesPageToFit={true} + /> + +