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代码
   `;<WebViewsource={{ uri: 'https://example.com' }}injectedJavaScriptBeforeContentLoaded={injectScript}onMessage={(event) => {// 可选：处理来自网页的消息}}
   />
   

三、注意事项

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

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

四、拓展阅读

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