React Native WebView：如何判断多轮重定向已完成？

以下是几种实用的方案，帮你判断WebView何时完成所有重定向操作：

方案一：通过onNavigationStateChange追踪导航状态 #

这个回调会在WebView的导航状态发生变化时触发（包括每一次重定向），你可以通过对比URL变化和加载状态来判断重定向是否结束。

示例代码：

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

function TargetWebView() {
  const [prevUrl, setPrevUrl] = useState(null);
  const [isRedirecting, setIsRedirecting] = useState(false);

  const handleNavStateChange = (navState) => {
    const { url, loading } = navState;

    // 当加载新URL且和之前不同时，标记进入重定向流程
    if (!loading && url !== prevUrl) {
      setIsRedirecting(true);
      setPrevUrl(url);
    }

    // 当加载完成且URL不再变化时，判定重定向结束
    if (!loading && isRedirecting) {
      setIsRedirecting(false);
      console.log('所有重定向完成，最终URL:', url);
      // 这里执行重定向完成后的业务逻辑
    }
  };

  return (
    <WebView
      source={{ uri: '你的初始跳转URL' }}
      onNavigationStateChange={handleNavStateChange}
    />
  );
}

注意：如果目标页面存在JS动态跳转的情况，需要根据实际场景调整判断逻辑。

方案二：结合onLoadEnd与定时器判断 #

每次重定向完成后都会触发onLoadEnd事件，你可以通过设置定时器，当一段时间内没有新的onLoadEnd触发时，判定重定向已完成。

示例代码：

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

function TargetWebView() {
  const redirectTimer = useRef(null);

  const handleLoadEnd = () => {
    // 每次加载结束时重置定时器
    if (redirectTimer.current) clearTimeout(redirectTimer.current);
    // 设置1秒延迟（可根据目标网站速度调整），无新加载则判定重定向完成
    redirectTimer.current = setTimeout(() => {
      console.log('重定向已完成');
      // 执行后续逻辑
    }, 1000);
  };

  return (
    <WebView
      source={{ uri: '你的初始跳转URL' }}
      onLoadEnd={handleLoadEnd}
    />
  );
}

注意：定时器时长需要根据目标网站的重定向速度调整，避免误判。

方案三：注入JS脚本监听页面跳转 #

通过injectJavaScript注入自定义脚本，监听页面URL变化，再通过onMessage回调通知RN端，结合加载状态判断重定向是否结束。

示例代码：

import WebView from 'react-native-webview';

function TargetWebView() {
  const injectScript = `
    let lastUrl = window.location.href;
    setInterval(() => {
      if (window.location.href !== lastUrl) {
        lastUrl = window.location.href;
        window.ReactNativeWebView.postMessage('urlUpdated:' + lastUrl);
      }
    }, 500);
    true; // 必须返回true，否则脚本执行会报错
  `;

  const handleMessage = (event) => {
    const msg = event.nativeEvent.data;
    if (msg.startsWith('urlUpdated:')) {
      const currentUrl = msg.split(':')[1];
      console.log('当前跳转URL:', currentUrl);
      // 可结合onLoadEnd事件，判断是否为最终加载完成状态
    }
  };

  return (
    <WebView
      source={{ uri: '你的初始跳转URL' }}
      injectJavaScript={injectScript}
      onMessage={handleMessage}
      onLoadEnd={() => console.log('当前页面加载完成')}
    />
  );
}

内容的提问来源于stack exchange，提问作者Thanh-Quy Nguyen