Chrome-app와 PostMessage가 포함 된 홈페이지 간의 통신

Chrome 앱에서 webview를 통해 postMessage를 홈페이지로 보내야합니다.Chrome-app와 PostMessage가 포함 된 홈페이지 간의 통신

Chrome 앱에서 홈페이지로 PostMessage를 설정했으며 PostMessage도 홈페이지에서 수신 대기하고 새 메시지가 다시 전송되지만이 PostMessage 응답은 Chrome 앱에 걸리지 않습니다.

나는 그것이 크롬 앱의 API :

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

에 가능하다고 볼 수는 그래서 문제는 내가, 크롬 앱은 홈페이지에서 응답을 잡으려고해도 얻을 수 있다는 것입니다 내가 event.source.postMessage ('', event.origin)를 사용하여 회신을 보냅니다. window.addEventListener ('message', messageHandler, false);입니다. background.js의 끝에서 틀렸어? 내가 가진

는 (크롬 응용 프로그램을 초기화) :

background.js :와

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

전 문제를 진단하지는 못했지만 일부는 background.js에서 글로벌 변수를 사용하여 데이터를 보유하고 있으며, 은 언로드되어 필요에 따라 다시로드되기 때문에 이벤트 페이지에서 작동하지 않습니다. (특정 이벤트 처리기가 설정되었다는 사실 만 기억되지만 처리기 자체는 기억하지 않습니다.) –

배경 페이지에서 메시지를 보내고받을 필요가 있습니까? 앱의 메인 페이지에서 메시지를 보내면 그냥 작동해야합니다. 즉, webview-embed.html – lazyboy

@lazyboy의 자바 스크립트에서 전송합니다. [알림] (https://developer.chrome.com)을 만들고 싶습니다./apps/notifications) 웹 페이지에서 이벤트 (들어오는 메시지)가 발생하는 경우 다른 방법으로 달성 할 수 있는지 알고 있습니까? – Nederby

감사합니다. 해결책을 찾았습니다!

나는

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을 :

을 청소 webview.js을 만들어 웹뷰 embed.html에로드

출처

2014-09-22 14:32:30 Nederby

Chrome-app와 PostMessage가 포함 된 홈페이지 간의 통신

답변

관련 문제