Chrome Web App webview高度问题
Chrome Web App webview height issue
我是 Chrome Web 应用程序编程的新手。我想要一个简单的 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>
我期望 window 像这样(它显示 Chromium 用于演示):
但我得到了这些:
所以网络视图中的高度不正确。当我将高度设置为(例如)192px 时,它会显示正确的尺寸。但是 100% 不起作用...
这可能是因为您在 <!DOCTYPE html>
中使用了相对高度和宽度。有关解释,请参阅 this answer。
您可以尝试以像素为单位指定宽度和高度,而不是使用 100%。
<webview style="display:block; width:400px; height:600px;" src="http://www.google.de"></webview>
我在 Google+ 上问过 François Beaufort(Chromium 工程师 atm)。
嗨重播:
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
查看这些示例后,我有以下 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;
现在我得到了我想要的。全屏网页视图:
编辑:
我还在 GitHub 上上传了一个 git 仓库以查看源代码:
https://github.com/StefMa/ChromeAppWebsite
这个解决方案似乎对我有用,它不是很理想,但有效:
<webview src="https://github.com" style="width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></webview>
这对我有用(显然在 HTML 中的样式元素内):
webview {
display: flex;
height: 100vh;
}
将此添加到 styles.css
webview{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
我是 Chrome Web 应用程序编程的新手。我想要一个简单的 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>
我期望 window 像这样(它显示 Chromium 用于演示):
但我得到了这些:
所以网络视图中的高度不正确。当我将高度设置为(例如)192px 时,它会显示正确的尺寸。但是 100% 不起作用...
这可能是因为您在 <!DOCTYPE html>
中使用了相对高度和宽度。有关解释,请参阅 this answer。
您可以尝试以像素为单位指定宽度和高度,而不是使用 100%。
<webview style="display:block; width:400px; height:600px;" src="http://www.google.de"></webview>
我在 Google+ 上问过 François Beaufort(Chromium 工程师 atm)。 嗨重播:
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
查看这些示例后,我有以下 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;
现在我得到了我想要的。全屏网页视图:
编辑:
我还在 GitHub 上上传了一个 git 仓库以查看源代码: https://github.com/StefMa/ChromeAppWebsite
这个解决方案似乎对我有用,它不是很理想,但有效:
<webview src="https://github.com" style="width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></webview>
这对我有用(显然在 HTML 中的样式元素内):
webview {
display: flex;
height: 100vh;
}
将此添加到 styles.css
webview{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}