Chrome应用 <webview> 标签不能更改背景颜色

Question

I'm trying to make a google app extension that loads a external webpage having the app frameless. 我正在尝试制作一个Google应用扩展程序，以加载具有无框架应用程序的外部网页。 At launch of the program it takes few seconds for the page to load and the it's all white. 程序启动时，页面加载需要几秒钟时间，页面全为白色。 Whatever I do I can't change the background color. 无论如何，我都无法更改背景颜色。

Bellow is a part of the code Any ideas? 波纹管是代码的一部分有什么想法吗？

manifest.json 的manifest.json

   {
        "name": "Stats ",
        "description": "My Stats",
        "manifest_version": 2,
        "version": "1.0",
        "icons": {
            "128": "128.png"
        },
        "app": {
            "background": {
                "scripts": ["main.js"]
            }
        },
        "permissions": [
            "webview"
        ]
    }

main.js main.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("index.html",
    {  frame: "none",
       id: "framelessWinID",
       innerBounds: {
         width: 360,
         height: 300,
         left: 600,
         minWidth: 220,
         minHeight: 220
      }
    }
  );
});

index.html 的index.html

<html>
<head>
<title>Stats</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script>
var wv = document.querySelector('webview');
wv.addEventListener('loadcommit', function() {
  wv.insertCSS({
    code: 'body { background: red !important; }',
    runAt: 'document_start'
  });
});
</script>
</head>

<body>
<div id="top-box" ></div>

<webview src="" style="width:500px; height:500px;" ></webview>
</body>
</html>

Answer 1

The first issue here is that Google Chrome apps have a Content Security Policy that blocks inline javascript, so you will need to move your script out to its own file. 这里的第一个问题是Google Chrome应用程序的内容安全政策会阻止内联JavaScript，因此您需要将脚本移到其自己的文件中。

The second issue is that the insertCSS function inserts the CSS into the page that is loaded in the webview, not the webview itself. 第二个问题是insertCSS函数将CSS插入到Web视图中加载的页面中，而不是WebView本身中。

I'm not sure if it's possible to set a background style on the webview itself. 我不确定是否可以在Webview本身上设置背景样式。 If your goal is to not have a white box in your app while the page is loading, another approach might be to have a "please wait while the page loads" div overlaying the webview that you show/hide when the page is loading. 如果您的目标是在页面加载时在应用中没有白框，则另一种方法可能是让“请在页面加载时等待” div覆盖您在页面加载时显示/隐藏的Web视图。

index.html 的index.html

<html>
<head>
<title>Stats</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="index.js"></script>
</head>

<body>
<div id="top-box" ></div>

<webview src="..." style="width:500px; height:500px;" ></webview>
<div id="loading" style="background: red; position:fixed; z-index:999; left:0%; top:0%; width:100%; height:100%;">
    Loading...
</div>
</body>
</html>

index.js index.js

onload = function() {

var wv = document.querySelector('webview');
var loading = document.querySelector('#loading');

wv.addEventListener('loadstart', function() {
    loading.style.display="block";
});

wv.addEventListener('loadstop', function() {
    loading.style.display="none";
});

};

Chrome应用 <webview> 标签不能更改背景颜色

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-30 14:28:45

Chrome应用 <webview> 标签不能更改背景颜色

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-30 14:28:45

解决方案1
1 已采纳 2015-07-30 14:28:45