window.postMessage не отправляет данные в OnMessage WebView - PullRequest
Новая
       11

window.postMessage не отправляет данные в OnMessage WebView

0 голосов
/ 21 декабря 2018

Я создал веб-видение в своем компоненте Reaction-native, затем я хотел использовать postMessage для отправки данных и чтения их через OnMessage.На самом деле я не знаю, была ли проблема в моем postMessage или в моей опции onMessage в webView.Можете ли вы сказать мне, где проблема, пожалуйста?Вот мой компонент приложения: 

      let Script1 = `
      var data = {
      message : "OnFocusEvent"
        };
      window.postMessage(JSON.stringify({data}),"*");
         `;
     export default class App extends Component {
      constructor(props) {
      super(props);}
      render() {
       return (
       <View style={styles.container}>

      <RNEnhanceWebview
      ref={ref => (this.webView = ref)}
      style={{ flex: 1 }}
      source={{
        html:
          ' </br></br></br></br><form> <input id="input" class="input" 
      type="text" placeholder="name"/></form>'
      }}
      keyboardDisplayRequiresUserAction={false} //ios
      autoFocus={true} //android
      injectedJavaScript={Script1}
      automaticallyAdjustContentInsets={false}
      allowFileAccessFromFileURLs={true}
      scalesPageToFit={false}
      mixedContentMode={"always"}
      javaScriptEnabled={true}
      javaScriptEnabledAndroid={true}
      startInLoadingState={true}

      onMessage={event => {
        console.log(event.nativeEvent.data);
        console.log(JSON.parse(event.nativeEvent.data));
      }}
      onLoad={() => {}}
    />
      </View>
       }

У вас есть предложение показать данные моего сообщения?

1 Ответ

0 голосов
/ 21 декабря 2018

Вы правы, похоже, ваш код не работает на Android, но отлично работает на iOs ...

Это странно, похоже, что postMessage не работает назагрузка первой страницы, но если вы вызываете ее с задержкой, например, onFocus, она работает как положено.

Например, попробуйте этот скрипт: 

let Script1 = `
    document.getElementById("input").addEventListener("focus", function() {  
      var data = {
          type: "OnFocusEvent",
          message : "OnFocusEvent"
      };
      window.postMessage(JSON.stringify({data}),"*");
    });

    document.getElementById("input").addEventListener("blur", function() {  
      var data = {
          type: "OnBlurEvent",
          message : "OnBlurEvent"
      };
      window.postMessage(JSON.stringify({data}),"*");
    });
`;

onMessage={event => {
    console.log(event.nativeEvent.data);
    console.log(JSON.parse(event.nativeEvent.data));
    const messageData = JSON.parse(event.nativeEvent.data);
    const messageType = messageData.type;

    switch(messageType) {
        case "OnFocusEvent":
         console.log("Do whatever you want onFocus")
         break;
        case "OnBlurEvent":
         console.log("Do whatever you want onBlur")
         break;
        default:
         console.log("do nothing");
         break;
    }
}}

Вот пример на закуску: https://snack.expo.io/rkANOd9lN

Надеюсь, это поможет:)

...