Chrome apps <webview> тег не может изменить фоновый цвет

Я пытаюсь сделать расширение приложения Google, которое загружает внешнюю веб-страницу, имеющую приложение без рамки. При запуске программы на загрузку страницы требуется несколько секунд, и все белое. Что бы я ни делал, я не могу изменить цвет фона.Chrome apps <webview> тег не может изменить фоновый цвет

Bellow является частью кода Любые идеи?

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>

источник

2015-07-30 Alex _TNT

Первый вопрос заключается в том, что в приложениях Google Chrome есть Content Security Policy, который блокирует встроенный javascript, поэтому вам нужно будет переместить скрипт в свой собственный файл.

Вторая проблема заключается в том, что функция insertCSS вставляет CSS на страницу, загружаемую в веб-просмотр, а не в веб-представление.

Я не уверен, можно ли установить стиль фона на самом веб-сайте. Если ваша цель - не иметь белого ящика в приложении во время загрузки страницы, другой подход может заключаться в том, чтобы «подождать, пока страница загружает» div, накладывающийся на веб-просмотр, который вы показываете/скрываете, когда загружается страница.

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

};

источник

2015-07-30 14:28:45

Может быть, [ 'allowtransparency = "на"'] (https://developer.chrome.com/apps/ теги/webview # allowtransparency) могут помочь. – Xan

Этот метод работает, спасибо –

Chrome apps <webview> тег не может изменить фоновый цвет

ответ

Смежные вопросы