Merge fb6d351352 into 19896fc810

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

@@ -391,6 +391,21 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
     ((RNCWebView) view).setInjectedJavaScript(injectedJavaScript);
   }
 
+  @ReactProp(name = "injectedJavaScriptBeforeContentLoaded")
+  public void setInjectedJavaScriptBeforeContentLoaded(WebView view, @Nullable String injectedJavaScriptBeforeContentLoaded) {
+    ((RNCWebView) view).setInjectedJavaScriptBeforeContentLoaded(injectedJavaScriptBeforeContentLoaded);
+  }
+
+  @ReactProp(name = "injectedJavaScriptForMainFrameOnly")
+  public void setInjectedJavaScriptForMainFrameOnly(WebView view, boolean enabled) {
+    ((RNCWebView) view).setInjectedJavaScriptForMainFrameOnly(enabled);
+  }
+
+  @ReactProp(name = "injectedJavaScriptBeforeContentLoadedForMainFrameOnly")
+  public void setInjectedJavaScriptBeforeContentLoadedForMainFrameOnly(WebView view, boolean enabled) {
+    ((RNCWebView) view).setInjectedJavaScriptBeforeContentLoadedForMainFrameOnly(enabled);
+  }
+
   @ReactProp(name = "messagingEnabled")
   public void setMessagingEnabled(WebView view, boolean enabled) {
     ((RNCWebView) view).setMessagingEnabled(enabled);
@@ -732,6 +747,9 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
       super.onPageStarted(webView, url, favicon);
       mLastLoadFailed = false;
 
+      RNCWebView reactWebView = (RNCWebView) webView;
+      reactWebView.callInjectedJavaScriptBeforeContentLoaded();       
+
       dispatchEvent(
         webView,
         new TopLoadingStartEvent(
@@ -970,6 +988,16 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
   protected static class RNCWebView extends WebView implements LifecycleEventListener {
     protected @Nullable
     String injectedJS;
+    protected @Nullable
+    String injectedJSBeforeContentLoaded;
+
+    /**
+     * android.webkit.WebChromeClient fundamentally does not support JS injection into frames other
+     * than the main frame, so these two properties are mostly here just for parity with iOS & macOS.
+     */
+    protected boolean injectedJavaScriptForMainFrameOnly = true;
+    protected boolean injectedJavaScriptBeforeContentLoadedForMainFrameOnly = true;
+
     protected boolean messagingEnabled = false;
     protected @Nullable
     RNCWebViewClient mRNCWebViewClient;
@@ -1043,6 +1071,18 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
       injectedJS = js;
     }
 
+    public void setInjectedJavaScriptBeforeContentLoaded(@Nullable String js) {
+      injectedJSBeforeContentLoaded = js;
+    }
+
+    public void setInjectedJavaScriptForMainFrameOnly(boolean enabled) {
+      injectedJavaScriptForMainFrameOnly = enabled;
+    }
+
+    public void setInjectedJavaScriptBeforeContentLoadedForMainFrameOnly(boolean enabled) {
+      injectedJavaScriptBeforeContentLoadedForMainFrameOnly = enabled;
+    }
+
     protected RNCWebViewBridge createRNCWebViewBridge(RNCWebView webView) {
       return new RNCWebViewBridge(webView);
     }
@@ -1084,6 +1124,14 @@ public class RNCWebViewManager extends SimpleViewManager<WebView> {
       }
     }
 
+    public void callInjectedJavaScriptBeforeContentLoaded() {
+      if (getSettings().getJavaScriptEnabled() &&
+      injectedJSBeforeContentLoaded != null &&
+      !TextUtils.isEmpty(injectedJSBeforeContentLoaded)) {
+        evaluateJavascriptWithFallback("(function() {\n" + injectedJSBeforeContentLoaded + ";\n})();");
+      }
+    }
+
     public void onMessage(String message) {
       if (mRNCWebViewClient != null) {
         WebView webView = this;

docs/Guide.md

@@ -309,6 +309,12 @@ _Under the hood_
 
 This is a script that runs **before** the web page loads for the first time. It only runs once, even if the page is reloaded or navigated away. This is useful if you want to inject anything into the window, localstorage, or document prior to the web code executing.
 
+> Android Compatibility: 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 addJavascriptInterface(Object, String) instead to persist JavaScript objects across navigations.
+
+
+
 ```jsx
 import React, { Component } from 'react';
 import { View } from 'react-native';

docs/Reference.md

@@ -7,7 +7,9 @@ This document lays out the current public properties and methods for the React N
 - [`source`](Reference.md#source)
 - [`automaticallyAdjustContentInsets`](Reference.md#automaticallyadjustcontentinsets)
 - [`injectedJavaScript`](Reference.md#injectedjavascript)
-- [`injectedJavaScriptBeforeContentLoaded`](Reference.md#injectedJavaScriptBeforeContentLoaded)
+- [`injectedJavaScriptBeforeContentLoaded`](Reference.md#injectedjavascriptbeforecontentloaded)
+- [`injectedJavaScriptForMainFrameOnly`](Reference.md#injectedjavascriptformainframeonly)
+- [`injectedJavaScriptBeforeContentLoadedForMainFrameOnly`](Reference.md#injectedjavascriptbeforecontentloadedformainframeonly)
 - [`mediaPlaybackRequiresUserAction`](Reference.md#mediaplaybackrequiresuseraction)
 - [`nativeConfig`](Reference.md#nativeconfig)
 - [`onError`](Reference.md#onerror)
@@ -174,6 +176,30 @@ const INJECTED_JAVASCRIPT = `(function() {
 
 ---
 
+### `injectedJavaScriptForMainFrameOnly`
+
+If `true` (default; mandatory for Android), loads the `injectedJavaScript` only into the main frame.
+
+If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| bool | No       | iOS and macOS (only `true` supported for Android) |
+
+---
+
+### `injectedJavaScriptBeforeContentLoadedForMainFrameOnly`
+
+If `true` (default; mandatory for Android), loads the `injectedJavaScriptBeforeContentLoaded` only into the main frame.
+
+If `false`, (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| bool | No       | iOS and macOS (only `true` supported for Android) |
+
+---
+
 ### `mediaPlaybackRequiresUserAction`
 
 Boolean that determines whether HTML5 audio and video requires the user to tap them before they start playing. The default value is `true`. (Android API minimum version 17).

example/App.tsx

@@ -14,6 +14,7 @@ import Alerts from './examples/Alerts';
 import Scrolling from './examples/Scrolling';
 import Background from './examples/Background';
 import Uploads from './examples/Uploads';
+import Injection from './examples/Injection';
 
 const TESTS = {
   Alerts: {
@@ -48,6 +49,14 @@ const TESTS = {
       return <Uploads />;
     },
   },
+  Injection: {
+    title: 'Injection',
+    testId: 'injection',
+    description: 'Injection test',
+    render() {
+      return <Injection />;
+    },
+  },
 };
 
 type Props = {};
@@ -101,6 +110,11 @@ export default class App extends Component<Props, State> {
             title="Background"
             onPress={() => this._changeTest('Background')}
           />
+          <Button
+            testID="testType_injection"
+            title="Injection"
+            onPress={() => this._changeTest('Injection')}
+          />
           {Platform.OS === 'android' && <Button
             testID="testType_uploads"
             title="Uploads"

example/android/app/src/main/java/com/example/MainApplication.java

@@ -2,6 +2,9 @@ package com.example;
 
 import android.app.Application;
 import android.content.Context;
+import android.os.Build;
+import android.webkit.WebView;
+
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
@@ -44,6 +47,10 @@ public class MainApplication extends Application implements ReactApplication {
   @Override
   public void onCreate() {
     super.onCreate();
+    /* https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews */
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+      WebView.setWebContentsDebuggingEnabled(true);
+    }
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this); // Remove this line if you don't want Flipper enabled
   }

example/examples/Injection.tsx

@@ -0,0 +1,114 @@
+import React, {Component} from 'react';
+import {Text, View, ScrollView} from 'react-native';
+
+import WebView from 'react-native-webview';
+
+const HTML = `
+<!DOCTYPE html>
+<html>
+	<head>
+	    <meta charset="utf-8">
+	    <meta name="viewport" content="width=device-width, initial-scale=1">
+	    <title>iframe test</title>
+	</head>
+  <body>
+    <p style="">beforeContentLoaded <span id="before_failed" style="display: inline-block;">failed</span><span id="before_succeeded" style="display: none;">succeeded</span>!</p>
+    <p style="">afterContentLoaded <span id="after_failed" style="display: inline-block;">failed</span><span id="after_succeeded" style="display: none;">succeeded</span>!</p>
+    <iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe.html?v=1" name="iframe_0" style="width: 100%; height: 25px;"></iframe>
+		<iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe2.html?v=1" name="iframe_1" style="width: 100%; height: 25px;"></iframe>
+		<iframe src="https://www.ebay.co.uk" name="iframe_2" style="width: 100%; height: 25px;"></iframe>
+	</body>
+</html>
+`;
+
+type Props = {};
+type State = {
+  backgroundColor: string,
+};
+
+export default class Injection extends Component<Props, State> {
+  state = {
+    backgroundColor: '#FF00FF00'
+  };
+
+  render() {
+    return (
+      <ScrollView>
+        <View style={{ }}>
+          <View style={{ height: 200 }}>
+            <WebView
+              /**
+               * This HTML is a copy of a multi-frame JS injection test that I had lying around.
+               * @see https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframeTest.html
+               */
+              source={{ html: HTML }}
+              automaticallyAdjustContentInsets={false}
+              style={{backgroundColor:'#00000000'}}
+              
+              /* Must be populated in order for `messagingEnabled` to be `true` to activate the
+               * JS injection user scripts, consistent with current behaviour. This is undesirable,
+               * so needs addressing in a follow-up PR. */
+              onMessage={() => {}}
+
+              /* We set this property in each frame */
+              injectedJavaScriptBeforeContentLoaded={`
+              window.self.colourToUse = "green";
+
+              function declareSuccessBeforeContentLoaded(head){
+                var style = window.self.document.createElement('style');
+                style.type = 'text/css';
+                style.innerHTML = "#before_failed { display: none !important; }#before_succeeded { display: inline-block !important; }";
+                head.appendChild(style);
+              }
+
+              const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
+
+              if(head){
+                declareSuccessBeforeContentLoaded(head);
+              } else {
+                window.self.document.addEventListener("DOMContentLoaded", function (event) {
+                  const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
+                  declareSuccessBeforeContentLoaded(head);
+                });
+              }
+
+              `}
+              
+              injectedJavaScriptForMainFrameOnly={false}
+
+              /* We read the colourToUse property in each frame to recolour each frame */
+              injectedJavaScript={`
+              function declareSuccessAfterContentLoaded(head){
+                var style = window.self.document.createElement('style');
+                style.type = 'text/css';
+                style.innerHTML = "#after_failed { display: none !important; }#after_succeeded { display: inline-block !important; }";
+                head.appendChild(style);
+              }
+
+              declareSuccessAfterContentLoaded(window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
+
+              if(window.self.colourToUse){
+                window.self.document.body.style.backgroundColor = window.self.colourToUse;
+              } else {
+                window.self.document.body.style.backgroundColor = "cyan";
+              } 
+              `}
+            />
+          </View>
+        </View>
+        <Text>This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').</Text>
+        <Text>Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.</Text>
+        <Text>1a) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'green' as the "colour to be used".</Text>
+        <Text>1b) Also upon "beforeContentLoaded", a style element to change the text "beforeContentLoaded failed" -> "beforeContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>
+        <Text>2a) At injection time "afterContentLoaded", that variable will be read – if present, the colour green will be injected into all frames. Otherwise, cyan.</Text>
+        <Text>2b) Also upon "afterContentLoaded", a style element to change the text "afterContentLoaded failed" -> "afterContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>
+        <Text>✅ If the main frame, iframe_0, and iframe_1 all become green or cyan, then multi-frame injection is supported.</Text>
+        <Text>✅ If the two texts say "beforeContentLoaded succeeded!" and "afterContentLoaded succeeded!", then both injection times are supported.</Text>
+        <Text>❌ If the text "beforeContentLoaded failed" remains unchanged, then JS injection has failed on the main frame before the content loaded.</Text>
+        <Text>❌ If the text "afterContentLoaded failed" remains unchanged, then JS injection has failed on the main frame after the content loaded.</Text>
+        <Text>❌ If any frames become coloured cyan, then JS injection has failed before the content loaded (but succeeded after the content loaded).</Text>
+        <Text>❌ If only the main frame changes colour (to green or cyan), then multi-frame injection is not supported.</Text>
+      </ScrollView>
+    );
+  }
+}

src/WebViewTypes.ts

@@ -225,6 +225,8 @@ export interface CommonNativeWebViewProps extends ViewProps {
   incognito?: boolean;
   injectedJavaScript?: string;
   injectedJavaScriptBeforeContentLoaded?: string;
+  injectedJavaScriptForMainFrameOnly?: boolean;
+  injectedJavaScriptBeforeContentLoadedForMainFrameOnly?: boolean;
   mediaPlaybackRequiresUserAction?: boolean;
   messagingEnabled: boolean;
   onScroll?: (event: NativeScrollEvent) => void;
@@ -853,6 +855,18 @@ export interface WebViewSharedProps extends ViewProps {
    */
   injectedJavaScriptBeforeContentLoaded?: string;
 
+  /**
+   * If `true` (default; mandatory for Android), loads the `injectedJavaScript` only into the main frame.
+   * If `false` (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
+   */
+  injectedJavaScriptForMainFrameOnly?: boolean;
+
+  /**
+   * If `true` (default; mandatory for Android), loads the `injectedJavaScriptBeforeContentLoaded` only into the main frame.
+   * If `false` (only supported on iOS and macOS), loads it into all frames (e.g. iframes).
+   */
+  injectedJavaScriptBeforeContentLoadedForMainFrameOnly?: boolean;
+
   /**
    * Boolean value that determines whether a horizontal scroll indicator is
    * shown in the `WebView`. The default value is `true`.