如何获取在 HTML 页面的 WebView 中发送的变量的值? [英] How can I get the value of a variable sent in a WebView in the HTML page?
问题描述
我正在开发一个需要将变量发送到将在 WebView 中显示的 html 页面的应用程序.这是 React Native 应用程序代码的基本示例.
export default class App extends Component {使成为(){让 variableCadena="React Native";返回(<容器><网页视图样式={{弹性:1}}originWhitelist={['*']}source={{uri:'file:///android_asset/PaginaEjemplo.html'}}style={{ marginTop: 20 }}javaScriptEnabled={true}domStorageEnabled={真}允许文件访问={真}allowUniversalAccessFromFileURLs={true}注入JavaScript={variableCadena}></WebView></容器>);}};HTML 可以像下面这样简单.
<头><title>Ejemplo de inyeccion desde React Native</title><script type="text/javascript">var 变量 = variableCadena;<身体><script type="text/javascript">document.body.innerHTML = "<h1>La 变量 es:"+变量+ "</h1>"</html>预期的结果是网页在 h1 标签中显示了应用程序中定义的 React Native 文本.谢谢大家的建议.
首先希望你使用的是
<块引用>更新作者要求使用变量进行演示
App.js
import React, { Component } from 'react';从'react-native'导入{视图}；从'react-native-webview'导入{WebView}；导出默认类 App 扩展组件 {注入js(){让名字 = '亚伯拉罕';setTimeout(() => {});return `document.getElementById('inject').innerHTML = '<h1>名字是<b>${name}</b></h1>';}使成为() {返回 (<视图样式={{ flex: 1 }}><网页视图ref={(r) =>(this.webref = r)}注入JavaScript={this.injectjs()}source={require('./demo.html')}/></查看>);}}demo.html
<头><title>Ejemplo de inyeccion desde React Native</title><风格>身体 {背景颜色:海蓝宝石；显示:-webkit-flex；-webkit-justify-content:中心；显示:弹性；对齐内容:居中；对齐项目:居中；弹性方向:列；}</风格><身体><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf"/><div id="注入"></html>结果
I am developing an App that needs to send variables to an html page that will be displayed in a WebView. Here is a basic example of the React Native Application code.
export default class App extends Component {
render()
{
let variableCadena="React Native";
return(
<Container>
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={{uri:'file:///android_asset/PaginaEjemplo.html'}}
style={{ marginTop: 20 }}
javaScriptEnabled={true}
domStorageEnabled={true}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
injectedJavaScript={variableCadena}
>
</WebView>
</Container>
);
}
};
The HTML can be as simple as the following one.
<html>
<head>
<title>Ejemplo de inyeccion desde React Native</title>
<script type="text/javascript">
var variable = variableCadena;
</script>
</head>
<body>
<script type="text/javascript">
document.body.innerHTML = "<h1>La variable es:"
+variable+ "</h1>"
</script>
</body>
</html>
The result that is expected is that the web page shows in the h1 tags the React Native text that was defined in the application. Thank you all for your suggestions.
First of all, I hope you are using https://github.com/react-native-community/react-native-webview instead of the from react-native because it's now being deprecated.
You can use the injectJavascript(...) method. Something like this...
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const run = `
document.body.style.backgroundColor = 'blue';
true;
`;
setTimeout(() => {
this.webref.injectJavaScript(run);
}, 3000);
return (
<View style={{ flex: 1 }}>
<WebView
ref={r => (this.webref = r)}
source={{
uri: 'https://stackoverflow.com/questions/57065527',
}}
/>
</View>
);
}
}
that will give you something like this:
Now work around that! Check the snack: https://snack.expo.io/@abranhe/stackoverflow-57065527
UPDATE the author requested a demo using a variable
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
injectjs() {
let name = 'Abraham';
setTimeout(() => {});
return `document.getElementById('inject').innerHTML = '<h1>The name is <b>${name}</b></h1>'`;
}
render() {
return (
<View style={{ flex: 1 }}>
<WebView
ref={(r) => (this.webref = r)}
injectedJavaScript={this.injectjs()}
source={require('./demo.html')}
/>
</View>
);
}
}
demo.html
<html>
<head>
<title>Ejemplo de inyeccion desde React Native</title>
<style>
body {
background-color: aquamarine;
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" />
<div id="inject">
</body>
</html>
Result
这篇关于如何获取在 HTML 页面的 WebView 中发送的变量的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
