今天在對接一個網頁時加載網頁總是碰到
Error loading page Domain: WebKitErrorDomain Error Code: 101 The URL can't be shown （無法顯示的URL）這樣的錯誤，當然WebView屏幕中間也出現了這樣錯誤的提示和內容。

本以為是個小錯誤，其實并不簡單。

谷歌了一下，網上也有各種解決方法

如：https://github.com/facebook/react-native/issues/9037
中 @lacker 的解決方法并不可行

renderError={ (e) => {
    if (e === 'WebKitErrorDomain') {
      return
    }
  }}

可以在評論區看到，并沒有解決問題
于是沒辦法中的辦法就是把 React Native 中 WebView 的代碼擼了一遍
找到了 4 種解決辦法，這里與大家分享，沒進坑的同學直接跳過去，進坑的同學希望看到后對你有幫助

前綴引導

WebView 正如其名，就是用來加載網頁（html），我們可以將網頁鏈接（URL），網頁內容（字符串），二進制流等交給 WebView 來顯示我們制作的網頁。

當然系統 API 也會給我們暴漏各種接口、回調供我們處理各種情況。

例如：

- (BOOL)webView:(__unused UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
  navigationType:(UIWebViewNavigationType)navigationType
  當 WebView 將要處理一個新的請求時，詢問是否允許此次請求
- (void)webView:(__unused UIWebView *)webView didFailLoadWithError:(NSError *)error
  當 WebView 加載出現異常的時候，會進入此回調，供我們處理錯誤。
等等

出現此種錯誤的情況與原因

出現錯誤的原因

當 WebView 處理一個請求時，首先會進入

 - (BOOL)webView:(__unused UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request

詢問是否允許加載此次請求，以返回的 BOOL 值為準。

如果我們默認不實現此代理方法，系統會自動判斷是否可以處理。如：是否是合法的 URL、是否是請求系統定制的一些 API，例如 tel:// 等等

而當我們不實現

- (void)webView:(__unused UIWebView *)webView didFailLoadWithError:(NSError *)error

的回調時，即便出錯了也不會有任何表現

言歸正傳：
出現這個錯誤的原因就是 WebView 加載了其實它無法處理的請求（URL）。導致進入了 “錯誤回調”。而“錯誤回調” RN 官方已經幫我們實現了其回調，并且幫我們加載了一個錯誤視圖在上面。

如下是 iOS 代碼：

- (void)webView:(__unused  UIWebView *)webView didFailLoadWithError:(NSError *)error

{

  if (_onLoadingError) {

  if ([error.domain  isEqualToString:NSURLErrorDomain] && error.code == NSURLErrorCancelled) {

  // NSURLErrorCancelled is reported when a page has a redirect OR if you load

  // a new URL in the WebView before the previous one came back. We can just

  // ignore these since they aren't real errors.

  // [http://stackoverflow.com/questions/1024748/how-do-i-fix-nsurlerrordomain-error-999-in-iphone-3-0-os](http://stackoverflow.com/questions/1024748/how-do-i-fix-nsurlerrordomain-error-999-in-iphone-3-0-os)

  return;

 }

  if ([error.domain  isEqualToString:@"WebKitErrorDomain"] && error.code == 102) {

  // Error code 102 "Frame load interrupted" is raised by the UIWebView if

  // its delegate returns FALSE from webView:shouldStartLoadWithRequest:navigationType

  // when the URL is from an http redirect. This is a common pattern when

  // implementing OAuth with a WebView.

  return;

 }

  NSMutableDictionary<NSString *, id> *event = [self  baseEvent];

 [event addEntriesFromDictionary:@{

  @"domain": error.domain,

  @"code": @(error.code),

  @"description": error.localizedDescription,

  }];

  _onLoadingError(event);

 }

}

如下是重點的部分 JS 代碼

...
otherView = (this.props.renderError || defaultRenderError)(
        errorEvent.domain,
        errorEvent.code,
        errorEvent.description
      );
...
      
...      
return (
      <View style={styles.container}>
        {webView}
        {otherView}
      </View>
    );
...

從代碼中可以看到，當webView 加載中出現一個錯誤時，會自動添加一個錯誤視圖到 WebView 的視圖正上方。也就是我們當前所碰到的錯誤的情況。

出現錯誤的情況

一般來說出現此情況的有如下幾種原因：

不合法的URL
- 非 http/https 開頭的URL
- URL含有不合法字符（需要用 URL 編碼進行編碼）
- URL 格式不正確
不合法的系統API
- 例如：tel:// 寫成了 tell://
不合法的APP跳轉
- 未在 LSApplicationQueriesSchemes 添加的第三方APP跳轉
- 未安裝的APP
- 例如跳轉到支付寶 alipays://
自定義的通過 URL 與 js 交互的URL（其實這么做是很巧妙的）
- 例如：自定義 native://save_image 保存圖片
- native://dismiss 當前頁面消失

等等。

解決方法

解決方法一

正如前面所說，當存在不合法的URL請求時，會進入 “錯誤回調”

 - (BOOL)webView:(__unused UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request

并且 RN 官方代碼中，也實現了這個方法，但是里面對URL的校驗只有一行代碼

BOOL isJSNavigation = [request.URL.scheme isEqualToString:RCTJSNavigationScheme];

也就是說，只要 scheme 不等于 RCTJSNavigationScheme 那么都是允許加載的，

這樣就相當于幾乎不設防，那么無論合法或者不合法的 URL 都會允許加載。

嗯，這么是不合理的。

找到這么一個暴力但是挺實用的方法

 if (![request.URL.scheme isEqual:@"http"] && 
      ![request.URL.scheme isEqual:@"https"] && 
      ![request.URL.scheme isEqual:@"about:blank"]) {
         if ([[UIApplication sharedApplication]canOpenURL:request.URL]) {
             [[UIApplication sharedApplication]openURL:request.URL];
         }
      return NO;
  }

return YES;

將此校驗和 RN 的 isJSNavigation 放在一起校驗，當做返回值

return !isJSNavigation  && (如上校驗)

如此便可以解決多數的攔截不成功問題了。也就不會出現我們碰到的這個問題了

解決方法二

對不合法的請求進行攔截

當然 React Native 中的 WebView 也是存在這個回調的。

RN 可以通過設置 onShouldStartLoadWithRequest 這個 WebView 初始化參數進行攔截。其返回值同樣是一個 BOOL 值。

如此我們就可以在 RN 中進行 URL 攔截了，而不必修改 react-native 中的代碼了。

----------- ************* ------------

但是事實并沒有這么簡單，即便我們設置了這個攔截，在真實的網絡環境中，如果存在不合法的URL，還是會出現錯誤頁面。

我們都已經設置了攔截，為什么還是會出現錯的視圖呢？

經過實踐和源碼分析：

當 iOS 中webView 回調

 - (BOOL)webView:(__unused UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request

這個方法的時候，其實會去執行RN webView onShouldStartLoadWithRequest 的方法的，如果其回調了 NO，直接返回 NO。否則返回了

return !isJSNavigation;

但我們都知道 RN 是單開了一個線程，那么回調就是異步的，為了實現同步的效果，所以 iOS WebView 中進行了線程鎖。

將當前線程鎖定 250ms，250ms 后查看 RN 的回調結果，當然如果 RN 沒有回調，默認值是 YES，允許此次請求。


// Block the main thread for a maximum of 250ms until the JS thread returns
  if ([_shouldStartLoadLock lockWhenCondition:0 beforeDate:[NSDate dateWithTimeIntervalSinceNow:.25]]) {
    BOOL returnValue = _shouldStartLoad;
    [_shouldStartLoadLock unlock];
    _shouldStartLoadLock = nil;
    return returnValue;
  } else {
    RCTLogWarn(@"Did not receive response to shouldStartLoad in time, defaulting to YES");
    return YES;
  }

在實際的測試中，可以發現 0.25S 的時間貌似并不夠回調（1.包內置在APP中，并不是通過本地服務調試 2.為了測試，onShouldStartLoadWithRequest 只有一行代碼 return false）。

仍然會進入 RCTLogWarn(@"Did not receive response to shouldStartLoad in time, defaulting to YES"); 的警告中

在如此的測試中其時間明顯不過，當然也可能是因為我的手機是 iPhone5s(升級到了 11.1.0，被蘋果因為電池的原因降速了)的原因。

但事實就是，其時間著實不夠。

所以第二種方法就是

在 RN webView 中 onShouldStartLoadWithRequest 進行攔截，
增加線程鎖鎖定時間，具體時間，可以根據不同機型進行測試。例如：500ms（當然如此會導致，無論加載哪個請求，都至少會延遲 500ms 頁面渲染）
目前測試更改為 350ms ，沒有再出現時間不夠問題

image.png

解決方法三

前言：
RN WebView 中支持我們設定在加載出錯的情況的下，自定義的錯誤視圖

/**
     * Function that returns a view to show if there's an error.
     */
    renderError: PropTypes.func, // view to show if there's an error

當出現錯誤的情況下，可以添加一個錯誤視圖到 WebView 的上層。

當然，如果此參數不被賦值，RN 內部有 defaultRenderError 錯誤視圖展示。

var defaultRenderError = (errorDomain, errorCode, errorDesc) => (
  <View style={styles.errorContainer}>
    <Text style={styles.errorTextTitle}>
      Error loading page
    </Text>
    <Text style={styles.errorText}>
      {'Domain: ' + errorDomain}
    </Text>
    <Text style={styles.errorText}>
      {'Error Code: ' + errorCode}
    </Text>
    <Text style={styles.errorText}>
      {'Description: ' + errorDesc}
    </Text>
  </View>
);

到這里，就很清晰的知道為什么加載出錯 WebView 屏幕中間會出現錯誤信息了和為什么錯誤信息樣式如此完美（丑）。

正題：

其實進入到

- (void)webView:(__unused UIWebView *)webView didFailLoadWithError:(NSError *)error

就會發消息給 RN，然后 RN 開始渲染 renderError。

請大家記住這是一個很重要的點，后面會用到。暫且記為 “重點一”

----------**********-------

下面切換一下重點。

請看如下代碼

var webViewStyles = [styles.container, styles.webView, this.props.style];
if (this.state.viewState === WebViewState.LOADING ||
      this.state.viewState === WebViewState.ERROR) {
      // if we're in either LOADING or ERROR states, don't show the webView
      webViewStyles.push(styles.hidden);
    }

出自 WebView.ios.js 442 行

從代碼上可以看到，只要 webView 出現任何錯誤，那么 webView 將會被隱藏。。

o my gold!!!

為什么加載出錯的情況下，我的 webView 被隱藏了呢？？？？？

并且 this.props.style 是先于 webViewStyles.push(styles.hidden); 添加到 webViewStyles 中的。也就是說外部的 this.props.style 對 webView 的顯示與隱藏無任何作用。

只要 webView 被隱藏了，那么一切等于 0。

在加上上述 “重點一”，那么，那么，無能為力。

此時也就證明了
https://github.com/facebook/react-native/issues/9037
中 @lacker 的解決方法并不可行

這一點，可能 RN 官方為我們考慮的太多了，出現了一點瑕疵。

另：iOS 蘋果官方的 WebView 在遇到加載錯誤的情況下，也不會隱藏 UIWebView 的。

->>>>>>>> 可能出錯的只是我的這個頁面中很小的一個小功能，沒有這個功能也無所謂，最起碼主體界面不應該收到影響。
->>>>>>>> 如果真的出錯了，完全可以通過狀態外部隱藏，或者頂層加上錯誤遮罩，但是不能組件內部隱藏，如此外部是無法控制的

到這里誕生了我們的第三個解決方法

那就是修改 WebView.ios.js 代碼，當出現錯誤的情況下，我們不希望 webView 被隱藏掉，如果真的希望隱藏，我們可以通過 style 來隱藏

那么就是將 441 行代碼開始


    var webViewStyles = [styles.container, styles.webView, this.props.style];
    if (this.state.viewState === WebViewState.LOADING ||
      this.state.viewState === WebViewState.ERROR) {
      // if we're in either LOADING or ERROR states, don't show the webView
      webViewStyles.push(styles.hidden);
    }

更改為

var webViewStyles = [styles.container, styles.webView, this.props.style];
    if (this.state.viewState === WebViewState.LOADING) {
      // if we're in either LOADING states, don't show the webView
      webViewStyles.push(styles.hidden);
    }

錯誤情況下，我們不希望 webView 被強制隱藏掉。

可以通過 <WebView style={{}}/> 來控制顯示隱藏

當然此時是否需要展示錯誤信息，完全在你的手里，設定自定義的 renderError 則使用自定義的，沒有則使用默認的。

解決方法四（相對完美）

當然我們都不希望更改源碼。那就只能找到合適的時機，合適的地方來做合適的更改達到想要的效果

通過仔細觀察代碼，發現如下代碼給我們留下了一線生機

var webView =
      <NativeWebView
        ref={RCT_WEBVIEW_REF}
        key="webViewKey"
        style={webViewStyles}
        source={resolveAssetSource(source)}
        injectedJavaScript={this.props.injectedJavaScript}
        bounces={this.props.bounces}
        scrollEnabled={this.props.scrollEnabled}
        decelerationRate={decelerationRate}
        contentInset={this.props.contentInset}
        automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
        onLoadingStart={this._onLoadingStart}
        onLoadingFinish={this._onLoadingFinish}
        onLoadingError={this._onLoadingError}
        messagingEnabled={messagingEnabled}
        onMessage={this._onMessage}
        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
        scalesPageToFit={this.props.scalesPageToFit}
        allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
        mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
        dataDetectorTypes={this.props.dataDetectorTypes}
        {...nativeConfig.props}
      />;

當看到 {...nativeConfig.props} 的時候，送了一口氣，只要有動態的地方，就有我們可以利用的地方

我們可以通過 nativeConfig.props 來更改 style，將 style 屬性重寫掉。

并且代價也不大

var webViewStyles = [styles.container, styles.webView, this.props.style];

是默認的 style，其實他們都是很簡單了

 webView: {
    backgroundColor: '#ffffff',
  },
  container: {
    flex: 1,
  },

總結起來就是

style: {
    backgroundColor: '#ffffff',
    flex: 1,
}

故：

<WebView nativeConfig={
                        {
                            props: {
                                backgroundColor: '#ffffff',
                                flex: 1,
                            }
                        }
                    }
        }

此時碰到錯誤請求

例如：自定義的 URL JS 交互方法 native://saveImage

或者跳轉到沒有安裝的APP alipays:// 時

均不會對當前的 webView 造成影響

當然此時是否需要展示錯誤信息，完全在你的手里，設定自定義的 renderError 則使用自定義的，沒有則使用默認的。

后感

這種問題算是 RN 中的一點小瑕疵吧，也算是幫助（提醒、迫使）我們去看一些源碼，深入理解工作原理。

加油！！！

歡迎加入QQ群： 722600238

在這里可以討論、幫助你解決你遇到的問題

另外我的個人博客也已經上線，以后文章或先更新個人博客

onety的博客

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

React Native iOS 剖析 WebView && 解決 Error loading page Domain: WebKitErrorDomain Error Code: 101 Th...

React Native iOS 剖析 WebView && 解決 Error loading page Domain: WebKitErrorDomain Error Code: 101 Th...

前綴引導

出現此種錯誤的情況與原因

出現錯誤的原因

出現錯誤的情況

解決方法

解決方法一

解決方法二

解決方法三

解決方法四（相對完美）

后感

歡迎加入QQ群： 722600238

在這里可以討論、幫助你解決你遇到的問題

另外我的個人博客也已經上線，以后文章或先更新個人博客

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

React Native iOS 剖析 WebView && 解決 Error loading page Domain: WebKitErrorDomain Error Code: 101 Th...

前綴引導

出現此種錯誤的情況與原因

出現錯誤的原因

出現錯誤的情況

解決方法

解決方法 一

解決方法二

解決方法三

解決方法四（相對完美）

后感

歡迎加入QQ群： 722600238

在這里可以討論、幫助你解決你遇到的問題

另外我的個人博客也已經上線，以后文章或先更新個人博客

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

解決方法一