React Native WebView的InjectJavaScript在iOS端失效，求解决办法

• 替换注入时机属性：将injectedJavaScript改为injectedJavaScriptBeforeContentLoaded。iOS的WKWebView中，这个属性会在页面内容开始加载前注入脚本，比injectedJavaScript的执行时机更可靠，避免页面加载完成后脚本被安全策略拦截或错过执行时机。

• 包裹为立即执行函数：把注入的脚本包裹成立即执行函数，确保代码能立刻执行，示例代码：

  let yourAlert = '(function(){alert("hello");})()'
  

• 页面加载完成后手动注入：给WebView添加ref，在onLoadEnd回调中调用injectJavaScript方法，确保页面完全加载后执行脚本，示例代码：

  render() {
      return (
        <View style={{ flex: 1 }}>
            <WebView
              ref={(ref) => (this.webViewRef = ref)}
              javaScriptEnabled={true}
              domStorageEnabled={true}
              source={{uri:"https://www.google.com"}} 
              style={{ marginTop: 20 }}
              onLoadEnd={() => {
                this.webViewRef.injectJavaScript('alert("hello");');
              }}
              onMessage={(event) => {
                  console.log('event: ', event)
              }}
            />
        </View>
      );
  }
  

• 检查目标网站的内容安全策略（CSP）：部分网站（如谷歌）的CSP会限制内联脚本执行，这种情况下可以尝试通过postMessage传递脚本逻辑，或者使用evaluateJavaScript方法执行代码。如果是自定义网页，可调整CSP允许内联脚本；如果是第三方网站，该方法可能受限。

• 升级react-native-webview版本：当前使用的13.12.2可能存在iOS端的注入bug，尝试升级到最新稳定版，查看版本日志是否有修复相关问题的记录。

• 验证iOS原生配置：确保iOS项目中WKWebView的相关配置正确，比如在Info.plist中是否开启了必要的权限，通常javaScriptEnabled={true}已覆盖基础配置，可检查是否有其他自定义配置干扰脚本执行。

内容的提问来源于stack exchange，提问作者이윤호