javascript - 从 Google Chrome Webview 获取数据到调用者/父窗口

Question

我正在开发一个 Chrome Kiosk 应用程序(因此存在打包应用程序限制)，该应用程序本质上是一个将部署到某些 Chrome 设备的网络浏览器。我希望支持屏幕截图，并且我正在使用 HTML2Canvas 来执行此操作，但我需要存储它们以便稍后上传。

我使用带有回调的 webview.executeScript{file:} 来调用 HTML2Canvas。在回调中，我正在执行实际的 html2canvas 调用

  webview.executeScript({ file: "kiosk/html2canvas.js" }, handleHTML2CanvasInjected);

  function handleHTML2CanvasInjected(event) {
     var webview = document.querySelector('webview');
     webview.executeScript({code: "html2canvas(document.body).then(function(canvas){ //whatever });"});
   }

我可以将 Canvas 对象附加到正文并查看屏幕截图是否正常工作。但是，我需要将其返回给调用者。

我尝试使用 localStorage，但似乎 webviews 存储和调用者的存储是两个不同的东西。

归根结底，我需要能够在 Webview 和创建 Webview 的窗口之间进行“内容”通信。

Answer 1

使用以下几行加载 webview，以确保执行脚本后所有内容都已加载:

webview.addEventListener("contentload", function () {
  webview.executeScript({file: "myscript.js"}, function(result) {});
}

在脚本中，您可以调用 html2canvas。您可以使用消息传递系统将结果传达回主脚本:

var body = document.querySelector("body");

html2canvas(body, {
    onrendered: function(canvas) {
        chrome.runtime.sendMessage({canvas:canvas.toDataURL()});
    }
});

然后只需对主脚本中的 onMessage-Event 使用react即可:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
       if(request.canvas) {
          plugin.data.canvas = request.canvas;
          // do something with the screenshot
        }
    }
);

希望有帮助! :)

[编辑]

刚发现这个: https://code.google.com/p/chromium/issues/detail?id=326755

他们似乎正在开发 native 功能。然后将这样调用:

webview.captureVisibleRegion({ format: "png" }, function(dataUrl) { 
  var image = new Image();
  image.src = dataUrl;
  document.body.appendChild(image);
});