React Native WebView最新版本ref无injectJavaScript方法问题求助

架构老林

2026-6-29

问题：React Native WebView Web端ref无法调用injectJavaScript方法

环境信息

React Native 0.68.2
React Native WebView 11.23.1
Windows环境，构建Web端应用

问题说明

使用react-native-webview的injectedJavaScript属性可以正常执行初始化JS代码，但通过组件ref调用injectJavaScript方法时，发现ref.current对象中不存在该方法，无法动态注入JS代码。

代码示例

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

const ParentView = () => {
  const ref = useRef<WebView>(null);

  const webViewWrapperContent = `
    <body><div>some content</div></body>
  `;

  const onButtonClick = () => {
    console.log(ref.current);
    // 此处报错：injectJavaScript方法不存在
    ref.current?.injectJavaScript(`alert("here"); true;`);
  }

  return <View>
    <WebView
        ref={ref}
        source={{html: webViewWrapperContent}}
        style={{width: '100%', height: '100%'}}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        scrollEnabled={false}
        originWhitelist={['*']}
        sharedCookiesEnabled={true}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        injectedJavaScript={`console.log("injected")`}
        javaScriptCanOpenWindowsAutomatically={true}
        onMessage={(event) => {}}
      />
    <Button onPress={onButtonClick} title="执行注入JS" />
  </View>
}

解决方案

核心原因

在Web端（react-native-web）环境下，react-native-webview的Web实现并未将injectJavaScript方法暴露给组件ref——Web端的WebView本质是浏览器iframe，需要通过DOM操作或消息通信来实现动态JS注入。

方法1：直接操作iframe DOM

通过ref获取WebView对应的iframe元素，直接操作其contentWindow执行代码：

const onButtonClick = () => {
  // 获取WebView对应的iframe实例
  const iframe = ref.current?.getWebViewHandle?.();
  if (iframe?.contentWindow) {
    // 直接执行JS代码
    iframe.contentWindow.eval(`alert("here");`);
  }
}

注：此方法适用于本地HTML或同源页面，无跨域限制场景。

方法2：使用postMessage通信（推荐）

如果WebView内的页面是可控的，通过消息传递实现代码执行，更符合跨端设计：

修改初始化注入的JS，添加消息监听：

injectedJavaScript={`
  console.log("injected");
  // 监听来自外部的消息
  window.addEventListener('message', (event) => {
    if (event.data.type === 'EXECUTE_JS') {
      eval(event.data.code);
    }
  });
`}

修改按钮点击事件，通过postMessage传递代码：

const onButtonClick = () => {
  ref.current?.postMessage({
    type: 'EXECUTE_JS',
    code: `alert("here");`
  });
}

方法3：升级依赖版本

检查react-native-webview的最新兼容版本（需匹配RN 0.68.2），部分新版本已修复Web端ref方法缺失的问题，可尝试升级解决。

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

React Native WebView最新版本ref无injectJavaScript方法问题求助

环境信息 #

问题说明 #

代码示例 #

解决方案 #

核心原因 #

方法1：直接操作iframe DOM #

方法2：使用postMessage通信（推荐） #

方法3：升级依赖版本 #