个人中心
gpt4 book ai didi

google-chrome - Chrome Web App webview 高度问题

转载 作者：行者123 更新时间：2023-12-04 16:25:51 25 4
gpt4 key购买 nike

我是 Chrome Web App 编程的新手。我想要一个简单的 WebApp，它与我的 Chrome/Chromium 分开(意味着没有标签)。它应在正文中显示一个外部网站。

所以这是我的配置:

list 文件

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

背景.js 
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 400,
      'height': 600
    }
  });
});

窗口.html: 
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <webview style="width: 100%; height: 100%;" src="http://www.google.de"></webview>
  </body>
</html>

我期望有一个这样的窗口(它显示 Chromium for Demonstraiton):
enter image description here

但我得到了这些:

enter image description here

所以 webview 中的高度不正确。当我将高度设置为(例如)192px 时，它会显示正确的大小。但是 100% 不起作用...

最佳答案

我问过 François Beaufort (Chromium 工程师 atm)在 Google+ 上。
嘿重播:

The chromium team uses window.onresize to recalculate webview width and height in this sample: https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js



查看这些示例后，我有以下 Chrome 应用程序。

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

背景.js 
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 1050,
      'height': 700
    }
  });
});

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

main.js(这是魔法:D) 
function updateWebviews() {
  var webview = document.querySelector("webview");
  webview.style.height = document.documentElement.clientHeight + "px";
  webview.style.width = document.documentElement.clientWidth + "px";
};

onload = updateWebviews;
window.onresize = updateWebviews;

现在我得到了我想要的。带有网页全屏的 webview:
enter image description here

编辑:

我还在 GitHub 上上传了一个 git repo 以查看源代码:
https://github.com/StefMa/ChromeAppWebsite

关于google-chrome - Chrome Web App webview 高度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28194413/

25 4 0
文章推荐： gpl - GPL 异常(exception)的有效性
文章推荐： haskell - 有哪些可能的 Haskell 优化键？
文章推荐： elixir - 如何在 Elixir 中更好地组织这段代码？
文章推荐： asp.net-mvc - API 2 Controller 在 ASP.NET MVC 5 中不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com