React Native Webview 如何使用 injectJavascript

Question

>我正在尝试在由反应本机WebView加载的网页中设置全局变量。我正在尝试使用 injectJavascript prop 设置全局变量，但我收到一个错误，告诉我 injectJavascript 应该是一个函数。

如何格式化 injectJavaScript 函数以将消息作为全局变量传递到加载的网页？谢谢。

class Browser extends React.Component {
  render() {
    const { url } = this.props;
    return (
      <View>
        <WebView
          source={{ uri: url }}
          injectJavaScript={
            "window.testMessage = 'hello world'"
          }
        />
      </View>
    );
  }
}

Answer 1

如果你只想设置全局变量，你可以使用 injectedJavaScript prop，它会在视图加载时将你的 js 代码注入网页。您可以简单地将js代码作为字符串传递。

如果你想从任何函数设置全局变量，那么你可以执行以下操作：首先采取网络视图的参考。

<WebView
     ref={ref => (this.webview = ref)}
     ...
/>

然后，每当要注入 JS 代码时，请执行以下操作：

this.webview.injectJavaScript('window.testMessage = "hello world"; void(0);');

查看链接以供参考。

https://snack.expo.io/Hke6dJFAW

Answer 2

请尝试以下操作：

<WebView
    ref={c => this._webview = c}
    javaScriptEnabled={true}
    injectedJavaScript={`window.testMessage = "hello world"`}
/>

injectedJavaScript 是在加载时将 JS 注入 Web 视图的道具。这似乎是你想要的。

另一方面如何使用injectJavascript？ 它是通过在 Web 视图的 ref 上调用它来动态以编程方式注入更多 JS。在这种情况下，它可能看起来像这样，例如：

this.webview.injectJavascript(`window.reactComponent.forceUpdate();true;`)

Answer 3

您可以使用 webview 中的injectedJavaScript属性来执行此操作：

export default class app extends Component {
  constructor(props) {
    super(props);
    this.state = { webViewUrl: 'https://reactnative.dev' };
  }
render() {
    const jsCode = `document.querySelector('.HeaderHero').style.backgroundColor = 'purple';`;
    return (
      <View style={styles.container}>
        <WebView
          ref={ref => {
            this.webview = ref;
          }}
          source={{ uri: this.state.webViewUrl }}
          originWhitelist={['*']}
          javaScriptEnabledAndroid={true}
          injectedJavaScript={jsCode}
        />
      </View>
    );
  }
}

有关代码示例的完整说明：link_from_medium