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

Question

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

在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;

webview innertext 选择器

阅读 368

AI BotBETA

在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是正确的，并且该元素在页面加载完成时是存在的。此外，由于跨域安全策略的限制，你可能无法获取到一些网站的内容。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

小程序中WebView页面为何出现自动生成的返回按钮？如何去除？

iOS平台React Native WebView跳转微信页面白屏请问怎么解决？