React Native：如何获取WebView重定向页面中的FormData

核心思路是通过注入自定义JavaScript代码，拦截表单提交行为或在重定向页面加载完成后提取FormData，再通过WebView的消息机制将数据传递给RN原生端。以下是两种可行方案：

方法一：拦截表单提交事件实时获取数据 #

在WebView初始化时注入JS代码，监听页面的表单提交事件，提取FormData后发送给RN：

import { WebView } from 'react-native-webview';

// 注入的JS代码：拦截所有表单提交
const injectSubmitInterceptor = `
document.addEventListener('submit', function(e) {
  // 可选：阻止默认提交行为，避免页面跳转（根据业务需求调整）
  e.preventDefault();
  
  const targetForm = e.target;
  const formData = new FormData(targetForm);
  const dataObj = {};
  
  // 遍历FormData转为普通对象
  for (let [key, value] of formData.entries()) {
    dataObj[key] = value;
  }
  
  // 将数据发送给RN原生
  window.ReactNativeWebView.postMessage(JSON.stringify(dataObj));
});
`;

// 组件中使用WebView
function MyWebView() {
  return (
    <WebView
      source={{ uri: '你的初始页面URL' }}
      injectedJavaScript={injectSubmitInterceptor}
      javaScriptEnabled={true}
      onMessage={(event) => {
        // 解析从WebView传来的FormData
        const receivedFormData = JSON.parse(event.nativeEvent.data);
        console.log('获取到的FormData:', receivedFormData);
        // 这里处理拿到的数据
      }}
    />
  );
}

如果表单是通过AJAX/fetch异步提交的，需要拦截对应的请求：

// 注入拦截fetch的代码
const injectFetchInterceptor = `
const originalFetch = window.fetch;
window.fetch = function(url, options) {
  if (options?.method === 'POST' && options?.body instanceof FormData) {
    const formData = options.body;
    const dataObj = {};
    for (let [key, value] of formData.entries()) {
      dataObj[key] = value;
    }
    window.ReactNativeWebView.postMessage(JSON.stringify(dataObj));
  }
  return originalFetch.apply(this, arguments);
};
`;

方法二：重定向页面加载完成后提取数据 #

如果重定向后的页面包含已填充的表单，可在页面加载完成后注入JS提取数据：

import { useRef } from 'react';
import { WebView } from 'react-native-webview';

function RedirectFormDataWebView() {
  const webViewRef = useRef(null);

  // 提取表单数据的JS代码（假设目标表单id为targetForm）
  const extractFormData = `
const targetForm = document.getElementById('targetForm');
if (targetForm) {
  const formData = new FormData(targetForm);
  const dataObj = {};
  for (let [key, value] of formData.entries()) {
    dataObj[key] = value;
  }
  window.ReactNativeWebView.postMessage(JSON.stringify(dataObj));
}
`;

  return (
    <WebView
      source={{ uri: '初始页面URL' }}
      ref={webViewRef}
      javaScriptEnabled={true}
      // 监听页面加载完成事件
      onLoadEnd={() => {
        // 注入提取代码
        webViewRef.current?.injectJavaScript(extractFormData);
      }}
      // 监听重定向事件，可精准判断是否到达目标页面
      onNavigationStateChange={(navState) => {
        if (navState.url === '重定向目标页面URL') {
          webViewRef.current?.injectJavaScript(extractFormData);
        }
      }}
      onMessage={(event) => {
        const receivedFormData = JSON.parse(event.nativeEvent.data);
        console.log('重定向后获取的FormData:', receivedFormData);
      }}
    />
  );
}

注意事项 #

• 确保javaScriptEnabled属性设置为true（默认开启，但若有自定义配置需确认）。
• 动态表单处理：如果表单是异步渲染的，需使用MutationObserver监听DOM变化，或设置延迟执行提取代码，避免找不到表单元素。
• 跨域限制：若页面存在跨域策略，需确保页面允许脚本执行，或后端配置CORS规则。

内容的提问来源于stack exchange，提问作者Exciless_