feat(events): Add isTopFrame to shouldStartLoadForRequest (#1537)

* Add isTopFrame to shouldStartLoadForRequest on iOS

onLoadingStart is not raised for inner frames, but onShouldStartLoadWithRequest still is. This keeps that behavior but adds isTopFrame to onShouldStartLoadWithRequest so that apps can perform their own filtering if desired.

* Update docs

Co-authored-by: Jamon Holmgren <jamonholmgren@gmail.com>

android/src/main/java/com/reactnativecommunity/webview/events/TopShouldStartLoadWithRequestEvent.kt

@@ -14,6 +14,8 @@ class TopShouldStartLoadWithRequestEvent(viewId: Int, private val mData: Writabl
 
   init {
     mData.putString("navigationType", "other")
+    // Android does not raise shouldOverrideUrlLoading for inner frames
+    mData.putBoolean("isTopFrame", true)
   }
 
   override fun getEventName(): String = EVENT_NAME

apple/RNCWebView.m

@@ -937,13 +937,15 @@ static NSDictionary* customCertificatesForHost;
 
   WKNavigationType navigationType = navigationAction.navigationType;
   NSURLRequest *request = navigationAction.request;
+  BOOL isTopFrame = [request.URL isEqual:request.mainDocumentURL];
 
   if (_onShouldStartLoadWithRequest) {
     NSMutableDictionary<NSString *, id> *event = [self baseEvent];
     [event addEntriesFromDictionary: @{
       @"url": (request.URL).absoluteString,
       @"mainDocumentURL": (request.mainDocumentURL).absoluteString,
-      @"navigationType": navigationTypes[@(navigationType)]
+      @"navigationType": navigationTypes[@(navigationType)],
+      @"isTopFrame": @(isTopFrame)
     }];
     if (![self.delegate webView:self
       shouldStartLoadForRequest:event
@@ -955,7 +957,6 @@ static NSDictionary* customCertificatesForHost;
 
   if (_onLoadingStart) {
     // We have this check to filter out iframe requests and whatnot
-    BOOL isTopFrame = [request.URL isEqual:request.mainDocumentURL];
     if (isTopFrame) {
       NSMutableDictionary<NSString *, id> *event = [self baseEvent];
       [event addEntriesFromDictionary: @{

docs/Reference.md

@@ -682,6 +682,7 @@ canGoForward
 lockIdentifier
 mainDocumentURL (iOS only)
 navigationType
+isTopFrame
 ```
 
 ---

src/WebViewShared.tsx

@@ -2,8 +2,8 @@ import escapeStringRegexp from 'escape-string-regexp';
 import React from 'react';
 import { Linking, View, ActivityIndicator, Text } from 'react-native';
 import {
-  WebViewNavigationEvent,
   OnShouldStartLoadWithRequest,
+  ShouldStartLoadRequestEvent,
 } from './WebViewTypes';
 import styles from './WebView.styles';
 
@@ -39,7 +39,7 @@ const createOnShouldStartLoadWithRequest = (
   originWhitelist: readonly string[],
   onShouldStartLoadWithRequest?: OnShouldStartLoadWithRequest,
 ) => {
-  return ({ nativeEvent }: WebViewNavigationEvent) => {
+  return ({ nativeEvent }: ShouldStartLoadRequestEvent) => {
     let shouldStart = true;
     const { url, lockIdentifier } = nativeEvent;
 

src/WebViewTypes.ts

@@ -113,6 +113,10 @@ export interface WebViewNavigation extends WebViewNativeEvent {
   mainDocumentURL?: string;
 }
 
+export interface ShouldStartLoadRequest extends WebViewNavigation {
+  isTopFrame: boolean;
+}
+
 export interface FileDownload {
   downloadUrl: string;
 }
@@ -149,6 +153,8 @@ export type WebViewProgressEvent = NativeSyntheticEvent<
 
 export type WebViewNavigationEvent = NativeSyntheticEvent<WebViewNavigation>;
 
+export type ShouldStartLoadRequestEvent = NativeSyntheticEvent<ShouldStartLoadRequest>;
+
 export type FileDownloadEvent = NativeSyntheticEvent<FileDownload>;
 
 export type WebViewMessageEvent = NativeSyntheticEvent<WebViewMessage>;
@@ -238,7 +244,7 @@ export interface WebViewNativeConfig {
 }
 
 export type OnShouldStartLoadWithRequest = (
-  event: WebViewNavigation,
+  event: ShouldStartLoadRequest,
 ) => boolean;
 
 export interface CommonNativeWebViewProps extends ViewProps {
@@ -258,7 +264,7 @@ export interface CommonNativeWebViewProps extends ViewProps {
   onLoadingStart: (event: WebViewNavigationEvent) => void;
   onHttpError: (event: WebViewHttpErrorEvent) => void;
   onMessage: (event: WebViewMessageEvent) => void;
-  onShouldStartLoadWithRequest: (event: WebViewNavigationEvent) => void;
+  onShouldStartLoadWithRequest: (event: ShouldStartLoadRequestEvent) => void;
   showsHorizontalScrollIndicator?: boolean;
   showsVerticalScrollIndicator?: boolean;
   // TODO: find a better way to type this.
@@ -266,7 +272,7 @@ export interface CommonNativeWebViewProps extends ViewProps {
   source: any;
   userAgent?: string;
   /**
-   * Append to the existing user-agent. Overriden if `userAgent` is set.
+   * Append to the existing user-agent. Overridden if `userAgent` is set.
    */
   applicationNameForUserAgent?: string;
 }