CODEWITHSUNDEEP
google-chrome-extensiongoogle-chrome-app
Awena
Awena

Reputation: 1022

Chrome : Webview not resizing

I am testing the <webview> element in Chrome and I have gone through the documentation but I cannot figure out why the Webview is not resizing when the parent window does.

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();
});

I tried also removing the autosize=on as recommended but it does not work. Another question how to disable the main window (Embedder) from resizing. Thanks

Upvotes: 2

Views: 3009

Answers (3)

Love Dager
Love Dager

Reputation: 2311

I don't know if this is a new thing but I did exactly this with CSS:

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

Easy as pie!

Upvotes: 0

Sergey Shevchenko
Sergey Shevchenko

Reputation: 1887

You should use the chrome.app.window.onBoundsChanged API on the window object returned by chrome.app.window.create. Simple implementation:

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

See a much more elaborate object-oriented example with multiple windows and persisting/reusing the last window size set by the user here: https://github.com/GoogleChrome/chrome-app-samples/tree/master/url-handler.

As to your second question, it would be good if you asked it separately, but nevertheless: just set the resizable parameter of chrome.app.window.create to false:

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

Upvotes: 6

ryanholder
ryanholder

Reputation: 21

I set out to achieve something similar and the following approach is how I implemented it.

index.html

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

background.js

The code you have here looks correct.

index.js

I approached this in a slightly different way by using the window.onresize event to handle the resize. Please keep in mind that resize event is fired after the screen has been resized and may seem to create a slightly laggy feel.

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';
}

I also call the setWebview(); function in the onLoad or something of the sorts for the initial setting of the webview.

So that is my approach, looking at your index.js I think you may be having an issue in that you are trying to set the width and height of the <webview> when in fact you need to be setting the style width and height, so maybe the following would have worked;

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

Notice that I added in .style before .width and .height

Hope that helps..

Upvotes: 1

Related Questions