QWebView no cargar CSS externo
Pregunta
Estoy utilizando un QWebView para mostrar algunos contenidos y quiero usar CSS personalizado para arreglar la salida. He descubierto que puedo utilizar el método QWebSettings.setUserStyleSheetUrl()
cargar mi propio CSS en la vista. El archivo .css
está en el mismo directorio que mi programa principal.
self.webview = QWebView(MainWindow)
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile("myCustom.css"))
Sin embargo, los estilos personalizados no se cargan cuando agrego el contenido de la página utilizando setHtml()
. He probado que el CSS está aplicando correctamente al HTML en un navegador estándar.
Cualquier idea de lo que estoy haciendo mal?
Solución
En Qt, todas las rutas de acceso a archivos externos debe ser ABSOLUTOS caminos, no los relativos.
Para solucionar el problema, añadir a realizar el cambio siguiente:
path = os.getcwd()
self.webview.settings().setUserStyleSheetUrl(QUrl.fromLocalFile(path + "/myCustom.css"))
y todo funcionaba correctamente. Esperamos que esto ayudará a alguien en el futuro y guardarlos en un par de horas de depuración.
Otros consejos
En Qt, todas las rutas de acceso a archivos externos deben ser rutas absolutas, no los relativos.
Eso no es cierto. El siguiente código funciona para mí.
#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();
}
El archivo .css se encuentra en el mismo directorio como mi programa principal.
Las rutas relativas se interpretan en relación con el directorio de trabajo actual, que no tiene por qué ser el mismo que el directorio del ejecutable.
Me acabo de encontrar con esto, así que voy a publicar mi prueba aquí fragmento de código; el fragmento genera su propio html y css archivo en el mismo directorio que el script en Python; y la secuencia de comandos se llama desde el mismo directorio para la prueba.
Por lo menos en python
/ PyQt4
, parece que - de hecho - es sólo rutas absolutas que el trabajo con setHtml
.
El código de prueba puede:
- fallar por completo (totalmente en blanco
QWebView
[ en cuyo caso yo realmente hubiera deseado para escupir algunos mensajes de error; encontrados Como llegar mensaje de error detallado cuando QtWebKit no se puede cargar una página? , pero no puede hacerlo al trabajo ]); - mostrar contenido sin estilo CSS;
- o mostrar el contenido de estilo:
El método setHtml
parece mostrar texto con estilo solamente con c3
memoria descriptiva, cuando se utiliza file://
+ ruta absoluta. ( EDIT: sólo quería señalar que la sugerencia en este post , "probar Arora (un envoltorio muy simple en la parte superior de QtWebKit); si funciona, es su código si no lo hace. , su sitio web." fue muy útil para el comportamiento de doble control )
Esta es la configuración de la secuencia de comandos se puso a prueba en:
$ 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+
El guión es:
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()