Chrome Web App的webview高度问题 [英] Chrome Web App webview height issue
问题描述
我是Chrome Web App编程新手。我想要一个简单的WebApp，它与我的Chrome / Chromium分开（表示无选项卡）。它应在体内显示一个外部网站。
所以这是我的配置：
manifest.json
{
name：Hello World！，
description：我的第一款Chrome App。，
版本：0.1，
manifest_version：2，
permissions：[webview]，
图标：{
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 >< /网页视图>
< / body>
< / html>
我突出了一个这样的窗口（它显示了Chromium的演示）：
但是我得到了这些：
>
所以webview中的高度不正确。当我将高度设置为（例如）192px时，它会显示正确的大小。但100％不工作......
我问过
I'm new in Chrome Web App programming. I want a simple WebApp which is separated to my Chrome/Chromium (means no tab). It shall show a external website in the body.
So here is my configuration:
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>
I excpected a window like this (it shows Chromium for demonstraiton):
But I got these:
So the height in webview isn't correct. When I set the height to (for example) 192px, it's show the correct size. But 100% isn't working...
I've asked François Beaufort (Chromium engineer atm) on Google+. Hey replayed:
The chromium team uses window.onresize to recalculate webview width and height in this sample: https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js
After looking on these example I have the following Chrome App.
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 (here is the magic :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;
Now I have exactly what I want. A webview with fullscreen of a web page:
Edit:
I've also uploaded a git repo on GitHub for see the SourceCode: https://github.com/StefMa/ChromeAppWebsite
这篇关于Chrome Web App的webview高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
