React Native WebView onMessage 和 postMessage 获取所有网页

Question

React Native WebView onMessage 和 postMessage 获取所有网页

我不太清楚如何实现onMessage，postMessage我可以获取整个网页，但只能从反应本机端获取。

我的意思是，我将使用注入这段代码injectedJavaScript

var markup = document.documentElement.innerHTML
window.postMessage(markup)

Run Code Online (Sandbox Code Playgroud)

我将使用收到结果onMessage。这可能是因为到目前为止我还做不到吗

Answer 1

Pri*_*nce 5

是的，你可以做到这一点，你所要做的就是window.postMessage("message")从要加载的网页中使用WebView，你可以在onMessageprop.prop 中看到该消息。

例子：

class Test extends React.Component{
    constructor(props){
        super(props);
        this.state:{
            html:''
        }
    }
    componentWillMount(){
        this.setState({
            html : `<html>
    <head>
    <script>
    window.postMessage("Messga from webView")
    </script>
    </head>
    <body><h1>Hello from webView</h1></body>
    </html>`
        })
    }

    render(){
        return (
            <View style={{flex: 1}}>
                <WebView
                    ref={(reff) => {
                        this.webView = reff;
                    }}
                    source={{html: this.state.html}}
                    style={[styles.flex1, styles.padding5]}
                    onMessage={(event)=>{
                        let message  = event.nativeEvent.data;
                        /* event.nativeEvent.data must be string, i.e. window.postMessage
                        should send only string.
                        * */
                    }}
                    onNavigationStateChange={(evt)=>{}}
                    onError={(e) => {
                        console.warn('error occured', e)
                    }}/>
            </View>
        )
    }
}

Run Code Online (Sandbox Code Playgroud)

我刚刚添加了一个示例 html 并将其呈现在中WebView，您可以在要加载的页面中执行相同的操作WebView。

或者另一个解决方案是：

您可以按照此处所述使用injectedJavaScript或injectJavaScriptprops 。WebView

归档时间：	8 年前
查看次数：	19014 次
最近记录：	5 年，2 月前