2016-12-15 12 views
14

मुझे काम करने के लिए प्रतिक्रियात्मक वेबव्यू पोस्ट मैसेज नहीं मिल सकता है। प्रतिक्रिया मूल ऐप को सफलतापूर्वक वेब ऐप से पोस्ट संदेश प्रेषण प्राप्त होता है। लेकिन वेब ऐप को प्रतिक्रिया मूल ऐप से संदेश प्रेषण प्राप्त नहीं होता है।प्रतिक्रिया मूल वेबव्यू पोस्ट मैसेज काम नहीं करता

मेरे सरल वेब अनुप्रयोग

<html> 
 
<body> 
 

 
<button>Send post message from web</button> 
 
<div>Post message log</div> 
 
<textarea style="height: 50%; width: 100%;" readonly></textarea> 
 

 
<script> 
 
var log = document.querySelector("textarea"); 
 

 
document.querySelector("button").onclick = function() { 
 
    console.log("Send post message"); 
 

 
    logMessage("Sending post message from web.."); 
 
    window.postMessage("Post message from web", "*"); 
 
} 
 

 
window.addEventListener("message", function(event) { 
 
    console.log("Received post message", event); 
 

 
    logMessage(event.data); 
 
}, false); 
 

 
function logMessage(message) { 
 
    log.append((new Date()) + " " + message + "\n"); 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

यह वेब एप्लिकेशन पर होस्ट किया गया है: https://popping-heat-6062.firebaseapp.com/

मेरे सरल प्रतिक्रिया घरेलू एप्लिकेशन

import React, {Component} from "react"; 
import {AppRegistry, Text, View, TouchableHighlight, WebView} from "react-native"; 

export default class WevViewApp extends Component { 

    constructor(props) { 
     super(props); 

     this.webView = null; 
    } 

    onMessage(event) { 
     console.log("On Message", event.nativeEvent.data); 
    } 

    sendPostMessage() { 
     console.log("Sending post message"); 
     this.webView.postMessage("Post message from react native"); 
    } 

    render() { 
     return (
      <View style={{flex: 1}}> 
       <TouchableHighlight style={{padding: 10, backgroundColor: 'blue', marginTop: 20}} onPress={() => this.sendPostMessage()}> 
        <Text style={{color: 'white'}}>Send post message from react native</Text> 
       </TouchableHighlight> 
       <WebView 
        style={{flex: 1}} 
        source={{uri: 'https://popping-heat-6062.firebaseapp.com'}} 
        ref={(webView) => this.webView = webView} 
        onMessage={this.onMessage} 
       /> 
      </View> 
     ); 
    } 
} 

AppRegistry.registerComponent('WevViewApp',() => WevViewApp); 

परिणाम की उम्मीद

  1. क्लिक करने से "वेब से पोस्ट संदेश भेजें" बटन भेजता के लिए एक पोस्ट संदेश घरेलू एप्लिकेशन प्रतिक्रिया और में डिबगर खिड़की
  2. क्लिक करना "से पोस्ट संदेश भेजें लॉग होता है प्रतिक्रिया मूल निवासी "बटन वेब अनुप्रयोग के लिए एक पोस्ट संदेश भेजता है और वेब पाठ क्षेत्र में बाहर छपा है

वास्तविक परिणाम

  1. वेब एप्लिकेशन सफलतापूर्वक भेजता संदेश भेजता है घरेलू एप्लिकेशन प्रतिक्रिया करने के लिए और डीबगर खिड़की में लॉग ऑन है
  2. घरेलू एप्लिकेशन प्रतिक्रिया असफल वेब एप्लिकेशन को संदेश भेजता है और में बाहर मुद्रित नहीं है वेब textarea

क्या किसी को पता है कि वेब ऐप संदेश क्यों प्राप्त नहीं कर रहा है?

एंड्रॉइड और आईओएस दोनों के साथ परीक्षण किया गया।

संबंधित प्रलेखन: https://facebook.github.io/react-native/docs/webview.html


संपादित: एक व्यवहार है कि समस्या को ठीक से निर्धारित सकती है।

सीधे वेब ब्राउज़र में 'वेब से पोस्ट संदेश भेजें' बटन का परीक्षण करते समय टेक्स्टरेरा लॉग करता है कि उसने संदेश भेज दिया है और यह भी इसका अपना संदेश प्राप्त हुआ है।

Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web.. 
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Post message from web 

जब प्रतिक्रिया घरेलू एप्लिकेशन से WebView में एक ही कोशिश कर पाठ क्षेत्र केवल बाहर प्रिंट

Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web.. 

WebView window.postMessage विधि का अपहरण करके एक कस्टम इंजेक्षन करता है?

यह documentation में बताया गया है:

इस गुण को सेट एक postMessage अपने वेबव्यू में वैश्विक इंजेक्षन जाएगा, लेकिन अभी भी postMessage की पूर्व मौजूदा मूल्यों को कॉल करेंगे।

शायद यह गलत है और यही वह समस्या है जहां समस्या है?

+1

मैं एक ही मुद्दा है, पूरे दिन बिताया एक समाधान के लिए देख रहे हैं लेकिन, वहाँ नहीं है किसी भी, इस प्रक्रिया में एक पुल अनुरोध किया जा सकता है पर हम पाते हैं नहीं है कुछ समाधान https://github.com/facebook/react-native/pull/10941 –

उत्तर

26

मुझे एक ही समस्या थी और विंडो के बजाए ईवेंट श्रोता को दस्तावेज़ में जोड़कर इसे ठीक किया गया। परिवर्तित करें:

window.addEventListener("message", ... 

रहे हैं:

document.addEventListener("message", ... 
+1

यह काम करता है। धन्यवाद। याद रखें कि क्या आप नियमित ब्राउज़रों का भी समर्थन करना चाहते हैं, आपको दोनों को 'document.addEventListener ("message", ...' और 'window.addEventListener (" message ", ...' – Skarbo

+0

परिभाषित करना चाहिए, धन्यवाद, यह बहुत उपयोगी और सहेजा गया था मुझे काफी समय लगता है, बक्षीस का आनंद लें। – Nit

+2

क्या कोई इसे समझा सकता है? –

संबंधित मुद्दे