पोस्ट-मैसेज

के साथ क्रोम-एप और होमपेज के बीच संचार मुझे वेबपेज के माध्यम से होमपेज और बैक पर क्रोम ऐप से पोस्ट मैसेज भेजने में सक्षम होना चाहिए।पोस्ट-मैसेज

मैंने क्रोम ऐप से होमपेज पर पोस्टमेसेज स्थापित किया है, और पोस्टमेसेज होमपेज द्वारा भी पकड़ लिया गया है और एक नया वापस भेज दिया गया है, लेकिन यह पोस्टमेसेज उत्तर क्रोम ऐप द्वारा पकड़ा नहीं गया है।

मैं देख सकता हूँ कि यह क्रोम-ऐप एपीआई .:

The guest will be able to send replies to the embedder by posting message to event.source on the message event it receives.

पर संभव है तो समस्या यह है कि मैं Chrome एप्लिकेशन मुखपृष्ठ से जबाब पकड़ने के लिए, भले ही नहीं मिल सकता है मैं event.source.postMessage ('', event.origin) का उपयोग कर उत्तर भेज रहा हूं। खिड़की है .addEventListener ('संदेश', संदेश हैंडलर, झूठा); background.js के अंत में गलत?

मेरे पास है .:

background.js (जहां Chrome ऐप आरंभ नहीं हो जाता) .:

var myAppWin = null; 
    var webview = null; 

chrome.app.runtime.onLaunched.addListener(function() { 
    // Center window on screen. 
    var screenWidth = screen.availWidth/2; 
    var screenHeight = screen.availHeight; 

    var chromeWindow = chrome.app.window.create('webview-embed.html', { 
    id: "helloWorldID", 
    bounds: { 
     width: screenWidth, 
     height: screenHeight, 
    } 
    }, function(win) { 

     myAppWin = win; 
     myAppWin.contentWindow.addEventListener('DOMContentLoaded', function() { 

      webview = myAppWin.contentWindow.document.getElementById('webview'); 

      try{ 
      webview.addEventListener("contentload", function() { 

       console.log("webview content is now loaded"); 

       try{ 
       console.log("Trying to post message"); 
       webview.contentWindow.postMessage("Message from Chrome APP!", "*"); 
       }catch(error){ 
       console.log("postMessage error: " + error); 
       } 

      }); 
      } 
      catch(err) { 
      console.log("Webview error: " + err); 
      } 

     }); 
    }); 

    //Event listnener for the PostMessage reply  
    var messageHandler = function(event) { 
    console.log("got message from page back: " + event.data); 
    }; 
    window.addEventListener('message', messageHandler, false); 



});

वेबदृश्य-embed.html साथ (html फ़ाइल नीचे मेरी कोड शामिल वेबव्यू टैग) .:

<!DOCTYPE html> 
<head> 
<title>webview</title> 
</head> 
<body style='margin:0;padding:0;' > 
    <webview src="http://localhost" style="width:100%;height:100%;" id="webview" ></webview> 
</body> 
</html>

index.html (वें वेब, कि पहले PostMessage को पकड़ने के लिए की जरूरत है और एक उत्तर वापस क्रोम ऐप्स को भेजे गए ई मुखपृष्ठ) .:

<!DOCTYPE html> 
<html lang="en" > 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>title</title> 
    </head> 
    <body > 
    <div id="wrapper" > 
     //body 
    </div> 

    //Used to catch messages from the Chrome App and reply back 
    var messageHandler = function(event) { 
     console.log('Message received fom APP!'); 
     try{ 
     console.log(event); 
     event.source.postMessage("Message from page", event.origin); 
     console.log("Sent massage back to APP"); 
     }catch(error){ 
     console.log("Error on postMessage back to APP" + error); 
     } 

    }; 
    window.addEventListener('message', messageHandler, false); 

    </script> 
    </body> 
</html>

स्रोत

2014-09-20 Nederby

मैंने पूरी समस्या का निदान नहीं किया है, लेकिन इसका एक हिस्सा यह हो सकता है कि आप डेटा को बनाए रखने के लिए अपनी पृष्ठभूमि.जेएस में वैश्विक चर का उपयोग कर रहे हैं, और वें एक ईवेंट पेज में काम नहीं करेगा, क्योंकि यह अनलोड हो गया है और आवश्यकतानुसार पुनः लोड किया गया है। (केवल तथ्य यह है कि कुछ ईवेंट हैंडलर सेट किए गए हैं, लेकिन हैंडलर स्वयं नहीं हैं।) –

क्या आपको पृष्ठभूमि पृष्ठ से संदेश भेजने और प्राप्त करने की आवश्यकता है? यदि आप ऐप के मुख्य पृष्ठ से संदेश भेजते हैं, तो इसे केवल काम करना चाहिए, यानी इसे वेबव्यू के जावास्क्रिप्ट से भेजना- embed.html – lazyboy

@lazyboy मैं एक [अधिसूचना] बनाना चाहता हूं (https://developer.chrome.com/ऐप्स/अधिसूचनाएं) जब वेबपृष्ठ पर कोई ईवेंट (आने वाला संदेश) हो रहा है, तो क्या आप जानते हैं कि इसे अलग तरीके से हासिल किया जा सकता है? – Nederby

इनपुट के लिए धन्यवाद। एक समाधान मिला!

मैं एक webview.js बना दिया है और वेबदृश्य-embed.html में यह लोड

var messageHandler = function(event) { 
    console.log("Got message from webpage back: " + event.data); 
}; 

webview = document.getElementById('webview'); 
webview.addEventListener("contentload", function() { 
    try{ 
    console.log("Trying to post message"); 
    webview.contentWindow.postMessage("Message from Chrome APP!", "*"); 
    }catch(error){ 
    console.log("postMessage error: " + error); 
    } 

}); 
window.addEventListener('message', messageHandler, false);

मेरी background.js

chrome.app.runtime.onLaunched.addListener(function() { 
    // Center window on screen. 
    var screenWidth = screen.availWidth; 
    var screenHeight = screen.availHeight; 

    var chromeWindow = chrome.app.window.create('webview-embed.html', { 
    id: "helloWorldID", 
    bounds: { 
     width: screenWidth, 
     height: screenHeight, 
    } 
    }); 
});

और वेब पर index.html .:

ऊपर साफ़

<!DOCTYPE html> 
<html lang="en" > 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>title</title> 
    </head> 
    <body > 
    <div id="wrapper" > 
     //body 
    </div> 
    <script> 
    var messageHandler = function(event) { 

     console.log('Message received fom APP!'); 

     try { 
     event.source.postMessage("Message from webpage", "*"); 
     console.log('message send back to get catched by webview'); 
     } catch(error) { 
     console.log("Error on postMessage back to APP" + error); 
     } 

    }; 
    window.addEventListener('message', messageHandler, false); 
    </script> 
    </body> 
</html>

स्रोत

2014-09-22 14:32:30 Nederby

पोस्ट-मैसेज

उत्तर

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