QWebView não carregando CSS externos
Pergunta
Estou usando um QWebView para exibir algum conteúdo e quero usar o CSS personalizado para enfeitar a saída. Eu descobri que posso usar o QWebSettings.setUserStyleSheetUrl()
Método para carregar meu próprio CSS na vista. o .css
O arquivo está no mesmo diretório do meu programa principal.
self.webview = QWebView(MainWindow)
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile("myCustom.css"))
No entanto, os estilos personalizados não carregam quando eu adiciono o conteúdo à página usando setHtml()
. Eu testei que o CSS está se aplicando corretamente ao HTML em um navegador padrão.
Alguma ideia do que estou fazendo de errado?
Solução
No QT, todos os caminhos para arquivos externos precisam ser ABSOLUTO caminhos, não relativos.
Para corrigir o problema, adiciono para fazer a seguinte alteração:
path = os.getcwd()
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile(path + "/myCustom.css"))
E tudo funcionou corretamente. Espero que isso ajude alguém no futuro e a salvar algumas horas de depuração.
Outras dicas
No QT, todos os caminhos para arquivos externos precisam ser caminhos absolutos, não relativos.
Isso não é verdade. O código abaixo funciona para mim.
#include <QtCore>
#include <QtGui>
#include <QtWebKit>
int main(int argc, char ** argv)
{
QApplication app(argc, argv);
QMainWindow mainWindow;
QWebView* webView = new QWebView(&mainWindow);
webView->settings()->setUserStyleSheetUrl(QUrl::fromLocalFile("google.css"));
QFile source("google.html");
source.open(QIODevice::ReadOnly);
webView->page()->mainFrame()->setHtml(QString::fromUtf8(source.readAll().constData()));
mainWindow.setCentralWidget(webView);
mainWindow.show();
return app.exec();
}
O arquivo .css está no mesmo diretório do meu programa principal.
Os caminhos relativos são interpretados em relação ao diretório de trabalho atual que não precisa ser o mesmo que o diretório do executável.
Eu apenas encontrei isso, então vou postar meu trecho de teste aqui; O snippet gera seu próprio arquivo .html e .css no mesmo diretório que o script python; e o script foi chamado do mesmo diretório para teste.
Pelo menos em python
/PyQt4
, parece que - de fato - é só caminhos absolutos que funcionam com setHtml
.
O código de teste pode:
- falhar completamente (completamente em branco [nesse caso, eu realmente desejaria
QWebView
para cuspir algumas mensagens de erro; encontrado Como obter uma mensagem de erro detalhada quando o qtwebkit falha ao carregar uma página?, mas não consigo fazer funcionar]); - mostrar conteúdo sem estilo CSS;
- Ou mostre o conteúdo:
o setHtml
o método parece mostrar texto com estilo apenas com especificação c3
, Onde file://
+ caminho absoluto é usado. (Editar: só queria notar que a sugestão em esta postagem, tentar Arora (uma embalagem muito simples em cima do QTWebkit); Se funcionar, é o seu código. se não for, é o site. "Foi muito útil para o comportamento de checagem dupla)
Esta é a configuração em que o script foi testado em:
$ lsb_release --description --codename
Description: Ubuntu 11.04
Codename: natty
$ apt-show-versions -r python-qt4
python-qt4/natty uptodate 4.8.3-2
python-qt4-dbus/natty uptodate 4.8.3-2
$ apt-show-versions -r libqtwebkit4
libqtwebkit4/natty uptodate 2.1~really2.0.2-0ubuntu1
$ python --version
Python 2.7.1+
O script é:
qtwebkit-test.py
#!/usr/bin/env python
# portions from:
# http://pysnippet.blogspot.com/2010/01/more-fun-with-qwebkit.html
import sys
import os
from PyQt4 import QtCore
from PyQt4 import QtGui
from PyQt4 import QtWebKit
global htmltext
def GenerateFiles():
global htmltext
print "GenerateFiles running"
csstext = """
body {
background-color: #058;
margin: 0px;
color: red;
}
"""
css_file = open("test.css", "w")
css_file.write(csstext)
css_file.close()
htmltextTop = """
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
"""
htmltextBottom = """
<title>qtwebkit-test</title>
</head>
<body>
<h1>HEADING</h1>
<p>Just to test ....</p>
<p>.... and test some more</p>
</body>
</html>
"""
cssopen = '<link rel="stylesheet" type="text/css" href="'
cssclose = '">'
# c1
cssfile = "test.css"
# c2
#~ cssfile = os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
# c3
#~ cssfile = "file://" + os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
# c4
#~ cssfile = "qrc://" + os.path.abspath(os.path.dirname(__file__)) + "/" + "test.css"
# c5 (empty)
#~ cssfile = ""
cssline = cssopen + cssfile + cssclose
#~ htmltext = htmltextTop + htmltextBottom # without css
htmltext = htmltextTop + cssline + htmltextBottom
html_file = open("test.html", "w")
html_file.write(htmltext)
html_file.close()
def main():
global htmltext
GenerateFiles()
qApp = QtGui.QApplication(sys.argv)
webView = QtWebKit.QWebView()
# l1
#~ webView.load(QtCore.QUrl.fromLocalFile("test.html")) # fails
# l2
#~ webView.load(QtCore.QUrl.fromLocalFile("./test.html")) # fails
# l3
#~ webView.load(QtCore.QUrl.fromLocalFile(os.path.abspath(os.path.dirname(__file__)) + "/" + "test.html")) # this works with #c1-#c3
# setHtml
#print htmltext
webView.setHtml(htmltext) # works with #c3 (rest are unstyled)
webView.show()
webView.resize(500, 400)
webView.setWindowTitle(__file__)
sys.exit(qApp.exec_())
if __name__ == "__main__":
main()