Merge fb6d351352 into 19896fc810

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

     ((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);
       super.onPageStarted(webView, url, favicon);
       mLastLoadFailed = false;
 
+      RNCWebView reactWebView = (RNCWebView) webView;
+      reactWebView.callInjectedJavaScriptBeforeContentLoaded();       
+
       dispatchEvent(
         webView,
         new TopLoadingStartEvent(
   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;
       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);
     }
       }
     }
 
+    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

 
 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

 - [`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)
 
 ---
 
+### `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

 import Scrolling from './examples/Scrolling';
 import Background from './examples/Background';
 import Uploads from './examples/Uploads';
+import Injection from './examples/Injection';
 
 const TESTS = {
   Alerts: {
       return <Uploads />;
     },
   },
+  Injection: {
+    title: 'Injection',
+    testId: 'injection',
+    description: 'Injection test',
+    render() {
+      return <Injection />;
+    },
+  },
 };
 
 type Props = {};
             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

 
 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;
   @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

+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

   incognito?: boolean;
   injectedJavaScript?: string;
   injectedJavaScriptBeforeContentLoaded?: string;
+  injectedJavaScriptForMainFrameOnly?: boolean;
+  injectedJavaScriptBeforeContentLoadedForMainFrameOnly?: boolean;
   mediaPlaybackRequiresUserAction?: boolean;
   messagingEnabled: boolean;
   onScroll?: (event: NativeScrollEvent) => void;
    */
   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`.