Question

我正在测试Chrome中的<webview>元素并且我已经阅读了文档，但我无法弄清楚为什么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）来调整大小。感谢

Answer 1

您应该在chrome.app.window.create返回的窗口对象上使用chrome.app.window.onBoundsChanged 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参数设置为false：

  ...
  chrome.app.window.create(
    'index.html', 
    {
      'bounds': {'width': 1010, 'height': 700}, 
      'resizable': false
    },
  ...

Answer 2

我开始实现类似的目标，以下方法是我实现它的方式。

的index.html

<webview  src="http://website.com" style="width:1010px; height:700px"></webview>

background.js

这里的代码看起来是正确的。

index.js

我通过使用window.onresize事件来处理调整大小，以稍微不同的方式解决了这个问题。请记住，调整屏幕大小后会调用resize事件，并且可能会产生稍微迟钝的感觉。

window.onresize = setWebview;

function setWebview() {
    var webview = document.querySelector('webview');
    var webviewWidth = document.documentElement.clientWidth;
    var webviewHeight = document.documentElement.clientHeight;

    webview.style.width = webviewWidth + 'px';
    webview.style.height = webviewHeight + 'px';
}

我也会在onLoad中调用setWebview();函数或类似的东西来进行webview的初始设置。

这就是我的方法，看看你的index.js我认为你可能遇到了一个问题，你正试图设置<webview>的宽度和高度，而实际上你需要设置样式的宽度和高度，所以可能以下工作;

$('webview').get(0).style.width = $(window).width();
$('webview').get(0).style.height = $(window).height();

请注意，我在.style和.width

之前添加了.height

希望有所帮助..

Answer 3

我不知道这是不是新事物，但我用CSS完成了这个：

webview {
    height: 100%;
    width: 100%;
}

简单就是馅饼！

Chrome：Webview没有调整大小

3 个答案:

的index.html

background.js

index.js