Question

我是Chrome Web App编程的新手。我想要一个简单的WebApp，它与我的Chrome / Chromium分开（意味着没有标签）。它应在机构中显示一个外部网站。

所以这是我的配置：

的manifest.json

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 400,
      'height': 600
    }
  });
});

window.html：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <webview style="width: 100%; height: 100%;" src="http://www.google.de"></webview>
  </body>
</html>

我想到了一个这样的窗口（它显示了Chromium for demonstraiton）： enter image description here

但我得到了这些：

enter image description here

因此webview中的高度不正确。当我将高度设置为（例如）192px时，它会显示正确的大小。但100％无效...

Answer 1

我在Google+上问过François Beaufort（Chromium工程师atm）。嘿重播：

chrome团队使用window.onresize重新计算webview宽度和此示例中的高度： https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js

查看这些示例后，我有以下Chrome应用程序。

的manifest.json：

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 1050,
      'height': 700
    }
  });
});

window.html

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <webview src='http://www.google.de' id="xx"></webview>
    <script src="main.js"></script>
  </body>
</html>

main.js（这是魔术：D）

function updateWebviews() {
  var webview = document.querySelector("webview");
  webview.style.height = document.documentElement.clientHeight + "px";
  webview.style.width = document.documentElement.clientWidth + "px";
};

onload = updateWebviews;
window.onresize = updateWebviews;

现在我正是我想要的。带有全屏网页的webview： enter image description here

修改

我还在GitHub上传了一个git repo，看看SourceCode： https://github.com/StefMa/ChromeAppWebsite

Answer 2

这适用于我（显然在HTML中的样式元素中）：

webview {
   display: flex;
   height: 100vh;
}

Answer 3

这个解决方案似乎对我有用，它不理想，但有效：

<webview src="https://github.com" style="width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></webview>

Answer 4

这可能发生，因为您使用<!DOCTYPE html>的相对高度和宽度。有关说明，请参阅this answer。

您可以尝试指定宽度和高度（以像素为单位），而不是使用100％。

<webview style="display:block; width:400px; height:600px;" src="http://www.google.de"></webview>

Chrome Web App webview高度问题

4 个答案: