React Native中检测WebView内容加载完成并滚动到底部

一、准确检测WebView内容完全加载 #

你之前使用onLoadEnd的问题在于，它仅触发WebView主文档加载完成的回调，但如果页面包含动态渲染的内容（比如异步加载的组件、图片），这个回调会提前触发，无法代表页面所有内容就绪。要精准检测页面加载完成，可通过注入JavaScript脚本监听页面的window.onload事件，再通过postMessage通知RN端：

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class TnCWebView extends Component {
  state = {
    isContentLoaded: false,
    hasScrolledToBottom: false,
  };

  handleMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.type === 'LOAD_COMPLETE') {
      this.setState({ isContentLoaded: true });
    } else if (data.type === 'SCROLL_TO_BOTTOM') {
      this.setState({ hasScrolledToBottom: true });
    }
  };

  injectLoadDetectionScript = `
    window.onload = function() {
      window.ReactNativeWebView.postMessage(JSON.stringify({type: 'LOAD_COMPLETE'}));
    };
  `;

  render() {
    return (
      <WebView
        style={{ flex: 1 }}
        originWhitelist={['*']}
        source={{ uri: '你的T&C页面URL' }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        onMessage={this.handleMessage}
        injectedJavaScript={this.injectLoadDetectionScript}
        scrollEnabled={true}
      />
    );
  }
}

export default TnCWebView;

二、正确判断滚动到底部 #

不要将WebView嵌套在ScrollView中，这会导致两个滚动容器冲突，无法准确获取滚动位置。正确做法是在WebView内部注入滚动监听脚本，计算滚动位置是否到达底部：

在上述代码基础上，添加滚动检测的注入脚本：

injectScrollDetectionScript = `
  window.addEventListener('scroll', function() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight || window.innerHeight;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    // 预留10px误差，避免页面布局细微变化导致判断不准
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      window.ReactNativeWebView.postMessage(JSON.stringify({type: 'SCROLL_TO_BOTTOM'}));
    }
  });
`;

// 合并加载检测与滚动检测脚本
combinedInjectedScript = `
  ${this.injectLoadDetectionScript}
  ${this.injectScrollDetectionScript}
`;

// 在WebView组件中替换原有injectedJavaScript属性
<WebView
  // ...其他属性
  injectedJavaScript={this.combinedInjectedScript}
/>

关键注意事项 #

• 禁止嵌套ScrollView与WebView：WebView自身具备滚动容器，嵌套会导致滚动事件混乱，无法准确获取偏移量。
• 适配动态内容：如果T&C页面存在大量异步加载内容，可将window.onload替换为MutationObserver监听DOM变化，确保所有内容渲染完成后再触发加载完成事件。
• 预留误差值：滚动到底部的判断中预留少量像素误差，避免浏览器兼容性或页面布局细节导致判断失效。

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