我正在测试 <webview> Chrome 中的元素，我已经阅读了文档，但我无法弄清楚为什么 Webview在父窗口调整大小时不调整。
Index.Html
<body>
<webview src="http://website.com" style="width:1010px; height:700px" minwidth="1010" minheight="700" autosize="on""></webview>
<script src="index.js"></script>
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'bounds': {
'width': 1010,
'height': 700
}});});
Index.js
$(function() {
function resizeWebView() {
$('webview').get(0).width = $(window).width();
$('webview').get(0).height = $(window).height();
}
$(window).resize(resizeWebView);
resizeWebView();
});
我也尝试删除 autosize=on按照建议，但它不起作用。
另一个问题是如何禁用主窗口(Embedder)调整大小。
谢谢
最佳答案
你应该使用 chrome.app.window.onBoundsChanged chrome.app.window.create 返回的窗口对象的 API。简单实现:
background.js
var appWin = null;
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(
'index.html',
{'bounds': {'width': 1010, 'height': 700}},
onWindowCreated
);
});
function onWindowCreated(win) {
appWin = win;
// Resize the webview when the window resizes.
appWin.onBoundsChanged.addListener(onBoundsChanged);
// Initialize the webview size once on launch.
onBoundsChanged();
}
function onBoundsChanged() {
var webview = document.querySelector('webview');
var bounds = appWin.getBounds();
webview.style.height = bounds.height + 'px';
webview.style.width = bounds.width + 'px';
}
index.js
// Nothing here
在此处查看一个更详尽的面向对象的示例，其中包含多个窗口并保留/重复使用用户设置的最后一个窗口大小:https://github.com/GoogleChrome/chrome-app-samples/tree/master/url-handler .
关于你的第二个问题，如果你单独问它会很好，但是:只需设置 chrome.app.window.create 的 resizable 参数即可。为假:
...
chrome.app.window.create(
'index.html',
{
'bounds': {'width': 1010, 'height': 700},
'resizable': false
},
...
关于google-chrome-extension - Chrome : Webview not resizing，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20043661/