根据 document.getelementbyid 是否存在设置状态

Question

所以我目前正在使用 InjectJavascript 来更改我的 webview 的 html 元素的值。我能够将这些值分配给我所在州的值。我将如何设置一些等于 document.getElementById('data').value 的状态变量？好像 ReactNative 和 javascript 代码不兼容。

我试过 if(document.getElementById('data').value.length > 0) { ${this.setState({data: document.getElementById('data').value})}}，但它不工作

const jsCode= `
  document.getElementById('username').value='${this.state.userName}';  
  document.getElementById('password').value='${this.state.userPassword}';
  document.getElementById('logIn').click();
`

<WebView
   style={styles.webView}
   source={{uri: 'http://example.com'}}
   javaScriptEnabled
   injectedJavaScript={jsCode}
   renderLoading={()=>{
     return(
       <ActivityIndicator style = {
          { position: 'absolute', left: 0, right: 0,
            top: 0, bottom: 0, alignItems: 'center',
            justifyContent: 'center'
          }
       }/>
     )}
   }>
 </WebView>

Answer 1

要将一些数据从 WebView 组件传递到 react-native 端，您可以使用 onMessage prop。

注意：有an issue与postMessage相关。示例注入代码取自this answer 来解决这个问题。

onMessage

WebView 调用时调用的函数 window.postMessage。设置此属性将注入一个 postMessage 全局进入您的 WebView，但仍会调用 postMessage 的预先存在的值。

window.postMessage 接受一个参数，数据，它将是 可用于事件对象 event.nativeEvent.data。 数据必须 是一个字符串。

示例

const jsCode = `function waitForBridge() {
   //the react native postMessage has only 1 parameter
   //while the default one has 2, so check the signature
   //of the function
   if (window.postMessage.length !== 1){
     setTimeout(waitForBridge, 200);
   }
   else {
     window.postMessage('abc'); // postMessage expects a string
   }
}

window.onload = waitForBridge;`

//...

<WebView
   style={styles.webView}
   source={{uri: 'http://example.com'}}
   javaScriptEnabled
   injectedJavaScript={jsCode}
   onMessage={(event) => console.log('Posted Message: ', event.nativeEvent.data)}
   renderLoading={()=>{
     return(
       <ActivityIndicator style = {
          { position: 'absolute', left: 0, right: 0,
            top: 0, bottom: 0, alignItems: 'center',
            justifyContent: 'center'
          }
       }/>
     )}
   }>
 </WebView>