多响应 <webview>答案

【问题标题】：Multiple responsive <webview>多响应 <webview>
【发布时间】：2017-07-19 17:06:07
【问题描述】：

我是 chrome 应用程序编程和 stackoverflow 的新手。

我有一个简单的 chrome 应用程序，我想在其中将多个网站嵌入到单独的 webviews 中，这些 webviews 会根据用户创建应用程序窗口的大小自动缩放，同时保持每个 web 视图的比例。这样一来，无论应用程序在所有内容显示上显示什么尺寸的屏幕。

我可以使用下面的代码让它在一个 webview 上工作，但是我不知道如何嵌入多个站点。

图片展示了我的理想场景。理想的：

清单.json { "name": "Hello World!", "description": "我的第一个 Chrome 应用程序。", “版本”：“0.1”， “清单版本”：2， “权限”：[“网络视图”]， “图标”：{ “128”：“标志.png” }, “应用程序”： { “背景”： { “脚本”：[“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;

【问题讨论】：

标签： javascript html webview google-chrome-app

【解决方案1】：

更新！

我有超过 1 个 webview 可以根据需要工作和缩放。然而，就像在我原来的帖子中一样，我希望在第二行有 3 个左右的 webviews，它们也像其他人一样随应用程序扩展。这甚至可能吗？我是否必须在每个视图中引用应用的某些百分比？

索引.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;

在我从桥上摔下来之前请有人帮忙！

【讨论】：