webview - 如何在React Native中获取WebView中特定标签的内容？

Question

在react native中，如何获取webview中的某个标签的内容，例如:
在webview中，加载baidu.com，我要获取这个页面中选择器为#s_menu_mine的innerText.

这是我当前尝试的代码，gpt给我的，但是这并不能触发handleMessage，即使触发了，我也不确定方法内的代码是否正确，代码如下：

import React, { useState, useRef } from 'react';import { View, StyleSheet, Alert } from 'react-native';import { WebView } from 'react-native-webview';const MyWebViewComponent = () => {  const webViewRef = useRef(null);  const handleLoadEnd = (syntheticEvent) => {    const jsCode = `        document.querySelector('#share-desc').textContent;      `;    webViewRef.current.injectJavaScript(jsCode);    console.log(webViewRef.current)  };  const handleMessage = (event) => {    console.log(event)    const content = event.nativeEvent.data;    setWebContent(content);    Alert.alert(content);  };  return (    <View style={styles.container}>      <WebView        ref={webViewRef}        source={{ uri: 'https://www.realmaster.cn/getapp' }}        onLoadEnd={handleLoadEnd}        onMessage={handleMessage}      />    </View>  );};const styles = StyleSheet.create({  container: {    flex: 1,  },});export default MyWebViewComponent;

Answer 1

在React Native中，WebView组件提供了一种在原生应用中嵌入web页面的方式。然而，由于React Native的WebView组件并不直接支持DOM操作，因此我们不能像在浏览器环境中那样直接使用document.querySelector等方法获取特定标签的内容。不过，我们可以通过在WebView中运行的JavaScript代码，将我们想要的数据发送到原生应用。

首先，你需要在WebView加载完成后，注入一段JavaScript代码，该代码将获取特定标签的内容，并使用postMessage方法将内容发送到原生应用。然后，在React Native的WebView组件上监听onMessage事件，该事件将在WebView中的JavaScript代码发送消息时触发。

下面是一个示例代码，展示如何在React Native的WebView中获取特定标签的内容：

import React, { useState, useRef } from 'react';import { View, StyleSheet, Alert } from 'react-native';import { WebView } from 'react-native-webview';const MyWebViewComponent = () => {  const webViewRef = useRef(null);  const [webContent, setWebContent] = useState('');  const handleLoadEnd = () => {    const jsCode = `      const content = document.querySelector('#s_menu_mine').innerText;      window.ReactNativeWebView.postMessage(content);    `;    webViewRef.current.injectJavaScript(jsCode);  };  const handleMessage = (event) => {    const content = event.nativeEvent.data;    setWebContent(content);    Alert.alert(content);  };  return (    <View style={styles.container}>      <WebView        ref={webViewRef}        source={{ uri: 'https://www.baidu.com' }}        onLoadEnd={handleLoadEnd}        onMessage={handleMessage}      />    </View>  );};const styles = StyleSheet.create({  container: {    flex: 1,  },});export default MyWebViewComponent;

在这个示例中，handleLoadEnd函数在WebView加载完成后被调用，它注入了一段JavaScript代码，该代码获取了id为s_menu_mine的元素的innerText，并使用postMessage方法将其发送到原生应用。然后，handleMessage函数在收到来自WebView的消息时被调用，它将消息内容存储到webContent状态变量中，并显示一个警告框。

请注意，你需要确保你要获取的元素的id是正确的，并且该元素在页面加载完成时是存在的。此外，由于跨域安全策略的限制，你可能无法获取到一些网站的内容。