React Native进阶（六十）：webview实现屏蔽所嵌套web页面异常弹窗

一、前言

在React Native项目集成web页面时，webview嵌套方式是常用方式。如果所嵌套的web页面由于某种不可控因素导致出现错误弹窗信息，webview作为web嵌套方式应该对其行为可控。

React Native的WebView组件在较新的版本中已经被社区维护的react-native-webview取代，react-native-webview允许通过injectedJavaScriptBeforeContentLoaded属性在页面加载前注入代码，这样能更早地覆盖错误处理和alert等方法。

具体步骤为:

1. 在WebView组件中注入JavaScript代码，覆盖window.onerror、window.addEventListener('error')，以及
   alert、confirm、prompt等方法。
2. 使用onMessage和onError事件处理程序来捕获可能的错误信息，但阻止它们显示弹窗。
3. 测试不同的场景，比如JavaScript错误、未处理的Promise rejection、主动调用的alert等，确保弹窗都被拦截。

在React Native中使用WebView嵌套网页时，屏蔽网页错误弹窗的方法如下：

二、解决方案

通过注入JavaScript代码覆盖错误处理和弹窗方法，阻止默认行为。以下是具体步骤：

1. 覆盖JavaScript错误处理
   在WebView中注入代码，拦截window.onerror和未处理的Promise异常：

   window.onerror = function(message, source, lineno, colno, error) {
     return true; // 阻止默认错误处理
   };
   window.addEventListener('error', function(event) {
     event.preventDefault();
   });
   window.addEventListener('unhandledrejection', function(event) {
     event.preventDefault();
   });
   

2. 屏蔽alert/confirm/prompt弹窗
   重写弹窗方法为空函数或静默处理：

   window.alert = function() {};
   window.confirm = function() { return true; }; // 自动确认
   window.prompt = function() { return null; }; // 返回空
   

3. 在React Native中配置WebView
   使用react-native-webview的注入属性，确保代码在页面加载前执行：

   import { WebView } from 'react-native-webview';
   
   const injectScript = `
     // 上述JavaScript代码
   `;
   
   <WebView
     source={{ uri: 'https://example.com' }}
     injectedJavaScriptBeforeContentLoaded={injectScript}
     onMessage={(event) => {
       // 可选：处理来自网页的消息
     }}
   />
   

三、注意事项

• 注入时机：使用injectedJavaScriptBeforeContentLoaded确保代码在页面初始化前执行，避免遗漏早期错误。
• 兼容性：部分网页可能通过其他方式触发弹窗（如自定义模态框），需针对性处理。
• 调试：测试时模拟各类错误（如未定义变量、主动调用alert）验证拦截效果。

通过上述方法，可以有效屏蔽WebView内网页的默认错误弹窗和对话框，提升应用体验。

四、拓展阅读

• 《ReactNative进阶（十）：WebView 应用详解》