Chrome uygulaması ile PostMessage ile ana sayfa arasındaki iletişim

Bir Chrome Uygulamasından web görünümünden ana sayfaya ve arkaya bir postMessage gönderebilmem gerekiyor.Chrome uygulaması ile PostMessage ile ana sayfa arasındaki iletişim

Chrome Uygulamasından ana sayfaya PostMessage'ı kurdum ve PostMessage da ana sayfa tarafından yakalanıyor ve yeni bir tane gönderiliyor, ancak bu PostMessage yanıtı Chrome Uygulaması tarafından yakalanmıyor.

Ben Krom-Uygulama API .:

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

üzerinde mümkün olduğunu görebilirsiniz Yani sorun i Chrome Uygulama ana sayfasından cevap yakalamak rağmen alamayan olmasıdır i event.source.postMessage ('', event.origin) kullanarak yanıtı gönder. Window.addEventListener ('message', messageHandler, false); background.js dosyasının sonunda yanlış mı? Ben

(Chrome uygulaması başlatılır) .:

background.js .: ile

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); 



});

Webview embed.html (html dosyası altında benim kod içeren webview etiketi) .:

<!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 (th İlk PostMessage yakalamak gerekiyor ve geri Krom uygulama içi bir yanıt göndererek web, e anasayfa) .: girişi için

<!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>

kaynak

2014-09-20 Nederby

Tüm sorunu teşhis etmedim, ancak verilerinizi korumak için background.js'nizde global değişkenler kullanıyor olabilirsiniz. Bir etkinlik sayfasında çalışmaz, çünkü gerektiği gibi boşaltılır ve yeniden yüklenir. (Yalnızca belirli olay işleyicilerinin ayarlanmış olması hatırlatılır, ancak işleyicilerin kendileri değil.) –

Arka plan sayfasından iletiyi göndermeniz ve almanız gerekiyor mu? Eğer mesajı uygulamanın ana sayfasından gönderirseniz, sadece çalışmalıdır, yani webview-embed.html – lazyboy

@lazyboy 'un JavaScript’inden gönderilmelidir [bildirimi] yapmak istiyorum (https://developer.chrome.com/apps/bildirimleri) web sayfasında bir etkinlik (gelen mesaj) olduğunda, bunun farklı bir şekilde gerçekleştirilip gerçekleştirilemeyeceğini biliyor musunuz? – Nederby

teşekkürler. Bir çözüm buldum!

Ben

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);

benim 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, 
    } 
    }); 
});

ve web üzerinde index.html .:

kadar temizlenen bir webview.js yaptı ve Webview embed.html bunu yüklenen

<!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>

kaynak

2014-09-22 14:32:30 Nederby

Chrome uygulaması ile PostMessage ile ana sayfa arasındaki iletişim

cevap

İlgili konular