Chrome 应用程序 <webview> 标签无法更改背景颜色答案

【问题标题】：Chrome apps <webview> tag can't change background-colorChrome 应用程序 <webview> 标签无法更改背景颜色
【发布时间】：2015-07-30 11:35:56
【问题描述】：

我正在尝试制作一个谷歌应用扩展程序，以加载具有应用程序无框架的外部网页。在程序启动时，页面加载需要几秒钟，并且它全是白色的。无论我做什么，我都无法更改背景颜色。

波纹管是代码的一部分有什么想法吗？

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

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

<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>

【问题讨论】：

标签： javascript webview google-chrome-app

【解决方案1】：

这里的第一个问题是 Google Chrome 应用程序有一个 Content Security Policy 阻止内联 javascript，因此您需要将脚本移出到它自己的文件中。

第二个问题是insertCSS函数将CSS插入到webview中加载的页面，而不是webview本身。

我不确定是否可以在 webview 本身上设置背景样式。如果您的目标是在页面加载时在您的应用程序中没有白框，另一种方法可能是让“请在页面加载时等待”div 覆盖您在页面加载时显示/隐藏的 web 视图。

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

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

};

【讨论】：

也许allowtransparency="on" 可以提供帮助。