feat(ios): ios injectJavaScriptObject (#3157)

* feat(ios): injectedJavaScriptObject props connect * feat(ios): injectedJavaScriptObject ios component props * feat(ios): injectedObjectJsonScript addUserScript * refactor(ios): type position lines * revert: src/WebViewTypes.ts * docs: support injectedJavaScriptObject ios * remove log * fix(ios): return string single quote
react-native-webview · Feb 13, 2024 · 8013944 · 8013944
1 parent 8f21868
commit 8013944
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 9 deletions.
diff --git a/apple/RNCWebView.mm b/apple/RNCWebView.mm
@@ -268,6 +268,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     REMAP_WEBVIEW_STRING_PROP(injectedJavaScriptBeforeContentLoaded)
     REMAP_WEBVIEW_PROP(injectedJavaScriptForMainFrameOnly)
     REMAP_WEBVIEW_PROP(injectedJavaScriptBeforeContentLoadedForMainFrameOnly)
+    REMAP_WEBVIEW_STRING_PROP(injectedJavaScriptObject)
     REMAP_WEBVIEW_PROP(javaScriptEnabled)
     REMAP_WEBVIEW_PROP(javaScriptCanOpenWindowsAutomatically)
     REMAP_WEBVIEW_PROP(allowFileAccessFromFileURLs)

diff --git a/apple/RNCWebViewImpl.h b/apple/RNCWebViewImpl.h
@@ -65,6 +65,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, copy) NSString * _Nullable injectedJavaScriptBeforeContentLoaded;
 @property (nonatomic, assign) BOOL injectedJavaScriptForMainFrameOnly;
 @property (nonatomic, assign) BOOL injectedJavaScriptBeforeContentLoadedForMainFrameOnly;
+@property (nonatomic, copy) NSString * _Nullable injectedJavaScriptObject;
 @property (nonatomic, assign) BOOL scrollEnabled;
 @property (nonatomic, assign) BOOL sharedCookiesEnabled;
 @property (nonatomic, assign) BOOL autoManageStatusBarEnabled;

diff --git a/apple/RNCWebViewImpl.m b/apple/RNCWebViewImpl.m
@@ -122,6 +122,7 @@ @interface RNCWebViewImpl () <WKUIDelegate, WKNavigationDelegate, WKScriptMessag
 
 @property (nonatomic, copy) RNCWKWebView *webView;
 @property (nonatomic, strong) WKUserScript *postMessageScript;
+@property (nonatomic, strong) WKUserScript *injectedObjectJsonScript;
 @property (nonatomic, strong) WKUserScript *atStartScript;
 @property (nonatomic, strong) WKUserScript *atEndScript;
 @end
@@ -1627,6 +1628,26 @@ - (void)setInjectedJavaScript:(NSString *)source {
   }
 }
 
+- (void)setInjectedJavaScriptObject:(NSString *)source
+{
+  self.injectedObjectJsonScript = [
+    [WKUserScript alloc]
+    initWithSource: [
+      NSString
+      stringWithFormat:
+       @"window.%@ ??= {};"
+      "window.%@.injectedObjectJson = function () {"
+      "  return `%@`;"
+      "};", MessageHandlerName, MessageHandlerName, source
+    ]
+    injectionTime:WKUserScriptInjectionTimeAtDocumentStart
+    /* TODO: For a separate (minor) PR: use logic like this (as react-native-wkwebview does) so that messaging can be used in all frames if desired.
+     *       I am keeping it as YES for consistency with previous behaviour. */
+    // forMainFrameOnly:_messagingEnabledForMainFrameOnly
+    forMainFrameOnly:YES
+  ];
+}
+
 - (void)setEnableApplePay:(BOOL)enableApplePay {
     _enableApplePay = enableApplePay;
     if(_webView != nil){
@@ -1665,11 +1686,10 @@ - (void)setMessagingEnabled:(BOOL)messagingEnabled {
     initWithSource: [
       NSString
       stringWithFormat:
-        @"window.%@ = {"
-      "  postMessage: function (data) {"
-      "    window.webkit.messageHandlers.%@.postMessage(String(data));"
-      "  }"
-      "};", MessageHandlerName, MessageHandlerName
+       @"window.%@ ??= {};"
+      "window.%@.postMessage = function (data) {"
+      "  window.webkit.messageHandlers.%@.postMessage(String(data));"
+      "};", MessageHandlerName, MessageHandlerName, MessageHandlerName
     ]
     injectionTime:WKUserScriptInjectionTimeAtDocumentStart
     /* TODO: For a separate (minor) PR: use logic like this (as react-native-wkwebview does) so that messaging can be used in all frames if desired.
@@ -1827,6 +1847,9 @@ - (void)resetupScripts:(WKWebViewConfiguration *)wkWebViewConfig {
   if (self.atStartScript) {
     [wkWebViewConfig.userContentController addUserScript:self.atStartScript];
   }
+  if (self.injectedObjectJsonScript) {
+    [wkWebViewConfig.userContentController addUserScript:self.injectedObjectJsonScript];
+  }
 }
 
 - (NSURLRequest *)requestForSource:(id)json {

diff --git a/apple/RNCWebViewManager.mm b/apple/RNCWebViewManager.mm
@@ -64,6 +64,7 @@ - (RNCView *)view
 RCT_EXPORT_VIEW_PROPERTY(injectedJavaScriptBeforeContentLoaded, NSString)
 RCT_EXPORT_VIEW_PROPERTY(injectedJavaScriptForMainFrameOnly, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(injectedJavaScriptBeforeContentLoadedForMainFrameOnly, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(injectedJavaScriptObject, NSString)
 RCT_EXPORT_VIEW_PROPERTY(javaScriptEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(javaScriptCanOpenWindowsAutomatically, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(allowFileAccessFromFileURLs, BOOL)

diff --git a/docs/Guide.md b/docs/Guide.md
@@ -375,7 +375,7 @@ By setting `injectedJavaScriptBeforeContentLoadedForMainFrameOnly: false`, the J
 > Note on Android Compatibility: For applications targeting `Build.VERSION_CODES.N` or later, JavaScript state from an empty WebView is no longer persisted across navigations like `loadUrl(java.lang.String)`. For example, global variables and functions defined before calling `loadUrl(java.lang.String)` will not exist in the loaded page. Applications should use the Android Native API `addJavascriptInterface(Object, String)` instead to persist JavaScript objects across navigations.
 
 
-#### The `injectedJavaScriptObject` prop (Android Only)
+#### The `injectedJavaScriptObject` prop
 
 Due to the Android race condition mentioned above, this more reliable prop was added. While you cannot execute arbitrary JavaScript, you can make an arbitrary JS object available to the JS run in the webview prior to the page load completing.
 

diff --git a/docs/Reference.md b/docs/Reference.md
@@ -257,7 +257,7 @@ Inject any JavaScript object into the webview so it is available to the JS runni
 
 | Type | Required | Platform                                          |
 | ---- | -------- | ------------------------------------------------- |
-| obj | No       | Android only |
+| obj | No       | iOS, Android |
 
 Example:
 

diff --git a/example/examples/Injection.tsx b/example/examples/Injection.tsx
@@ -105,7 +105,6 @@ export default class Injection extends Component<Props, State> {
               // Example usage of injectedJavaScriptObject({hello: 'world'}), see above
               const injectedObjectJson = window.ReactNativeWebView.injectedObjectJson();
               
-              // injectedJavaScriptObject is only available on Android
               if (injectedObjectJson) {
                 const injectedObject = JSON.parse(injectedObjectJson);
                 console.log("injectedJavaScriptObject: ", injectedObject); // injectedJavaScriptObject: { hello: 'world' }

diff --git a/src/RNCWebViewNativeComponent.ts b/src/RNCWebViewNativeComponent.ts
@@ -165,7 +165,6 @@ export interface NativeProps extends ViewProps {
   thirdPartyCookiesEnabled?: boolean;
   // Workaround to watch if listener if defined
   hasOnScroll?: boolean;
-  injectedJavaScriptObject?: string;
   // !Android only
 
   // iOS only
@@ -254,6 +253,7 @@ export interface NativeProps extends ViewProps {
     baseUrl?: string;
   }>;
   userAgent?: string;
+  injectedJavaScriptObject?: string;
 }
 
 export interface NativeCommands {

diff --git a/src/WebView.ios.tsx b/src/WebView.ios.tsx
@@ -58,6 +58,7 @@ const WebViewComponent = forwardRef<{}, IOSWebViewProps>(({
   injectedJavaScriptBeforeContentLoaded,
   injectedJavaScriptForMainFrameOnly = true,
   injectedJavaScriptBeforeContentLoadedForMainFrameOnly = true,
+  injectedJavaScriptObject,
   startInLoadingState,
   onNavigationStateChange,
   onLoadStart,
@@ -201,6 +202,7 @@ const WebViewComponent = forwardRef<{}, IOSWebViewProps>(({
       injectedJavaScriptBeforeContentLoaded={injectedJavaScriptBeforeContentLoaded}
       injectedJavaScriptForMainFrameOnly={injectedJavaScriptForMainFrameOnly}
       injectedJavaScriptBeforeContentLoadedForMainFrameOnly={injectedJavaScriptBeforeContentLoadedForMainFrameOnly}
+      injectedJavaScriptObject={JSON.stringify(injectedJavaScriptObject)}
       dataDetectorTypes={!dataDetectorTypes || Array.isArray(dataDetectorTypes) ? dataDetectorTypes : [dataDetectorTypes]}
       allowsAirPlayForMediaPlayback={allowsAirPlayForMediaPlayback}
       allowsInlineMediaPlayback={allowsInlineMediaPlayback}