Question

我有一个简单的测试HTML终点

https://testwebview.free.beeceptor.com/post

如果您发布上面的网址，则会得到类似的内容

<html>
    <head></head>
    <body>
        <h1>output</h1>
    </body>
</html>

在ios模拟器中，以下代码旨在检测是否存在带有“输出”作为文本的h1。在iOS模拟器中工作正常，但在Android模拟器中否。

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";
import qs from 'qs';

const isLogin = `
    (function() {
        return document.querySelector("h1").innerHTML === "output";
    })()
`;

export default class App extends Component {

    _onNavigationStateChange = (event) => {
        console.log('-- _onNavigationStateChange --');
        console.log(event.jsEvaluationValue);
    }

    render() {
        let sourceObj = {
            uri: 'https://testwebview.free.beeceptor.com/post',
            method: 'POST'
        };

        return (
            <WebView
                source={sourceObj}
                style={{ marginTop: 20 }}
                onLoadProgress={e => console.log(e.nativeEvent.progress)}

                ref={node => { this.webView = node; }}

                injectedJavaScript={
                    isLogin
                }

                mixedContentMode={'compatibility'}

                onNavigationStateChange={this._onNavigationStateChange}
            />
        );
    }
}

在ios模拟器中

_onNavigationStateChange = (event) => {
            console.log('-- _onNavigationStateChange --');
            console.log(event.jsEvaluationValue);
        }

event.jsEvaluationValue将为1，因为它在h1中找到了“输出”文本

使用Android模拟器在React Native Weview中运行javascript

0 个答案: