Multiple responsive <webview>

Question

I am new to chrome app programming and stackoverflow.

I have a simple chrome app in which I want to embed multiple websites into separate webviews that auto scales depending on how big the user makes the app window but also keeps the ratio per web view. This is so that no matter what size screen the app is displayed on all content shows.

I can get it working for one webview with the code below, however I cannot figure out how to embed more than 1 site.

The image shows my ideal scenario. Ideal:

manifest.json { "name": "Hello World!", "description": "My first Chrome App.", "version": "0.1", "manifest_version": 2, "permissions": [ "webview" ], "icons": { "128": "logo.png" }, "app": { "background": { "scripts": ["background.js"] } } }

background.js

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('index.html', {
        bounds: {
            'width': 1380,
            'height': 1700
        }
    });
})

index.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  body {
    margin: 0px;
  }
</style>
</head>
<body>
<webview id="wv1" src="http://www.google.com"></webview>
<script src="main.js"></script>
</body>
</html>

main.js

function updateWebviews() {
    var webview = document.querySelector("webview");
    webview.style.width = document.documentElement.clientWidth + "px";
};
onload = updateWebviews;
window.onresize = updateWebviews;

user3236169 user3236169 · Accepted Answer · 2017-02-28T18:35:33

Update!

I have more than 1 webview working and scaling as i want. However as in my original post I would like 3 or so webviews on the 2nd row that also scale with the app as the others do. Is this even possible? Will I have to reference some percentage of the app to each view?

Index.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  body {
    margin: 2px;
  }
</style>
</head>
<body>
<webview id="wv1" style="height:120px" src="http://www.google.com">          </webview>

<webview id="wv2" style="height:420px; width:400px" src="http://www.google.com"></webview>

<webview id="wv3" style="height:220px; width:400px" src="http://www.google.com"></webview>

<webview id="wv4" style="height:190px; width:400px" src="http://www.google.com"></webview>

main.js

 function updateWebviews() {
 var webview = document.getElementById("wv1");
 webview.style.width = document.documentElement.clientWidth + "px";
 var webview = document.getElementById("wv2");
 webview.style.width = document.documentElement.clientWidth + "px";
 var webview = document.getElementById("wv3");
 webview.style.width = document.documentElement.clientWidth + "px";
 var webview = document.getElementById("wv4");
 webview.style.width = document.documentElement.clientWidth + "px";
 };
 onload = updateWebviews;
 window.onresize = updateWebviews;

Please someone help before i throw myself off a bridge!

Multiple responsive <webview>

1 Answers