我试图在由反应本机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>
);
}
}
答案 0 :(得分:9)
如果您只想设置全局变量,可以使用injectJavaScript prop,它会在视图加载时将您的js代码注入网页。你可以简单地将js代码作为字符串传递。
如果要从任何函数设置全局变量,则可以执行以下操作: 首先请参考webview。
<WebView
ref={ref => (this.webview = ref)}
...
/>
然后每当您想要注入js代码时,请执行以下操作:
this.webview.injectJavaScript('window.testMessage = "hello world"; void(0);');
查看链接以供参考。
答案 1 :(得分:1)
Please try this:
<WebView
ref={c => this._webview = c}
javaScriptEnabled={true}
injectedJavaScript={`window.testMessage = "hello world"`}
/>
答案 2 :(得分:0)
您可以通过网络视图中的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