Chrome Web App webview高度问题
Ste*_*fMa 5 google-chrome google-chrome-extension google-chrome-app
我是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):
但我得到了这些:
因此webview中的高度不正确.当我将高度设置为(例如)192px时,它会显示正确的大小.但100%不起作用......
Ste*_*fMa 11
我在Google+上问过FrançoisBeaufort(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:
编辑:
我还在GitHub上传了一个git repo,看看SourceCode:https: //github.com/StefMa/ChromeAppWebsite
这适用于我(显然在HTML中的样式元素内):
webview {
display: flex;
height: 100vh;
}
| 归档时间： |
|
| 查看次数： |
4684 次 |
| 最近记录： |