Chromeウェブアプリのウェブビューの高さの問題

243

StefMa

Chromeウェブアプリのプログラミングは初めてです。Chrome / Chromiumに分離された（タブがないことを意味する）シンプルなWebAppが必要です。本体に外部のウェブサイトを表示するものとします。

だからここに私の設定があります：

マニフェスト.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を示しています）：ここに画像の説明を入力してください

しかし、私はこれらを手に入れました：

ここに画像の説明を入力してください

したがって、webviewの高さは正しくありません。高さを（たとえば）192pxに設定すると、正しいサイズが表示されます。しかし、100％は機能していません...

StefMa

Google+でFrançoisBeaufort（Chromium engineer atm）に質問しました。ちょっとリプレイ：

クロムチームはwindow.onresizeを使用して、このサンプルのWebビューの幅と高さを再計算します：https：//github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js

これらの例を見た後、私は次のChromeアプリを持っています。

マニフェスト.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;

今、私はまさに私が欲しいものを持っています。Webページのフルスクリーンを含むWebビュー：ここに画像の説明を入力してください