Skip to content

Add evaluateJavaScript to iOS WebView #8798

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.

Sign up for GitHub

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

Closed
thebnich wants to merge 5 commits into from
Closed

Add evaluateJavaScript to iOS WebView #8798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
00992b3
Add evaluateJavaScript to iOS WebView
thebnich Jul 13, 2016
4e0e9e8
Review comment: Fix escaping
thebnich Jul 15, 2016
9d38031
Use RCTPromise instead of RCTResponse
thebnich Jul 15, 2016
89e6d14
Removed callback support
thebnich Jul 15, 2016
74971b3
Fix whitespace and formatting
thebnich Jul 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions Libraries/Components/WebView/WebView.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,16 @@ var WebView = React.createClass({
);
},

/**
* Evaluate JavaScript on the current page.
*/
evaluateJavaScript: async function(script: string): Promise {

@satya164 satya164 Jul 15, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think Flow will soon require type parameters (not sure what they are called), so may be we have to change it to Promise<any>

var escaped = JSON.stringify(script).replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
var wrapped = 'JSON.stringify(eval(' + escaped + '))';

@javache javache Jul 18, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why enforce this JSON.stringify(eval( pattern? Why not just send over the original string? If your return value isn't string representable, you should add the JSON.stringify yourself.

@thebnich thebnich Jul 18, 2016

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why enforce this JSON.stringify(eval( pattern`? Why not just send over the original string?

#1191 has the relevant history (starting with @spicyj's comment). For forward compatibility with WKWebView (and to be more useful in general), we want the API to return the typed result equivalent to the page-side result.

The naive approach for doing this would be to simply say var wrapped = 'JSON.stringify(' + script + ')', using JSON.parse() on the result. That works for most cases, but breaks if the script contains multiple statements (i.e., 'foo'; 'bar';). eval() fixes this by executing all statements in the script and returning the result of the last statement, which is exactly what we need to feed the result to JSON.stringify(). That means we also need to stringify the script itself so we can use it in eval.

@worm-emoji worm-emoji Dec 7, 2016

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem with using eval in this way is that if the page enforces a Content Security policy that restricts the use of eval, the code won't be executed.

var resultString = await RCTWebViewManager.evaluateJavaScript(this.getWebViewHandle(), wrapped);
return JSON.parse(resultString);
},

/**
* We return an event with a bunch of fields including:
* url, title, loading, canGoBack, canGoForward
Expand Down
1 change: 1 addition & 0 deletions React/Views/RCTWebView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,6 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
- (void)goBack;
- (void)reload;
- (void)stopLoading;
- (NSString *)evaluateJavaScript:(NSString *)script;

@end
5 changes: 5 additions & 0 deletions React/Views/RCTWebView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@ - (void)stopLoading
[_webView stopLoading];
}

- (NSString *)evaluateJavaScript:(NSString*)script
{
return [_webView stringByEvaluatingJavaScriptFromString: script];
}

- (void)setSource:(NSDictionary *)source
{
if (![_source isEqualToDictionary:source]) {
Expand Down
19 changes: 19 additions & 0 deletions React/Views/RCTWebViewManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
#import "RCTUIManager.h"
#import "RCTWebView.h"
#import "UIView+React.h"
#import "RCTUtils.h"

@interface RCTWebViewManager () <RCTWebViewDelegate>

Expand Down Expand Up @@ -97,6 +98,24 @@ - (UIView *)view
}];
}

RCT_REMAP_METHOD(evaluateJavaScript, evaluateJavaScript:(nonnull NSNumber *)reactTag script:(nonnull NSString *)script resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{
[self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, RCTWebView *> *viewRegistry) {
RCTWebView *view = viewRegistry[reactTag];
if (![view isKindOfClass:[RCTWebView class]]) {
RCTLogError(@"Invalid view returned from registry, expecting RCTWebView, got: %@", view);
return;
}

NSString *result = [view evaluateJavaScript: script];
if (result && [result length] > 0) {
resolve(result);
} else {
reject(RCTErrorUnspecified, @"Error evaluating script.", nil);
}
}];
}

#pragma mark - Exported synchronous methods

- (BOOL)webView:(__unused RCTWebView *)webView
Expand Down