How to display embedded html in Qt WebView
Solution 1
Ok, here's how I ended up solving this. I ended up using a plain widget instead of a qml based interface.
I then had to read the first html page out from the resources manually and provide the base url. After that, subsequent pages and resources that are embedded as resources load fine.
Here's the code in question:
QResource res(":/html/index.html");
ui->webView->setHtml(reinterpret_cast<const char *>(res.data()), QUrl("qrc:/html/"));
where webView
is a QWebView
. My .qrc file looks like this:
<RCC>
<qresource prefix="/">
<file>html/index.html</file>
</qresource>
</RCC>
This works in Qt 5.5.0.
Solution 2
First , make sure that resource file is compiled correctly on compile folder (a .RCC
file or a qrc_<Resource name>.cpp
)
Second, make sure your file path is correct (in my case qrc:/images/resource/html/test.html
). You can open QRC file and right-click on html file and then click on Copy Resource Path to Clipboard
.
Third, Note that some urls needs more time for loading completely.
Finally, I test this scenario and it works very well (Using Qt 5.1.0)
Good luck - S.M.Mousavi
Solution 3
I don't thing it's possible opening resource from qrc directly in WebView (I've tried all url variants). What I'm doing now is copying the file to the local temp directory and then opening.
QString helpHTMLFile = QStandardPaths::writableLocation(QStandardPaths::TempLocation);
helpHTMLFile.append(QDir::separator());
helpHTMLFile.append("software_manual.html");
QFile(helpHTMLFile).remove();
QFile(":/software_manual.html").copy(helpHTMLFile);
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("pathToFile", "file:///"+helpHTMLFile);
Then QML looks like:
WebView {
anchors.fill: parent
url: pathToFile
}
Solution 4
The quickest way to load a resource file is using XMLHttpRequest
and loadHtml()
.
This works in Qt 5.10.1 for mobile platforms.
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtWebView 1.1
Page {
anchors.fill: parent
WebView {
id: webView
anchors.fill: parent
Component.onCompleted: {
var resource = 'qrc:/path/to/your/resource.html';
var xhr = new XMLHttpRequest;
xhr.open('GET', resource);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
var response = xhr.responseText;
webView.loadHtml(response);
}
};
xhr.send();
}
}
}
Related videos on Youtube
villintehaspam
Updated on June 04, 2022Comments
-
villintehaspam about 2 years
I am trying to get the Qt WebView to display an html file that is embedded as a Qt resource, but I can't seem to get it to work. I created a new Qt Quick application and added a simple qml file:
import QtQuick 2.0 import QtWebKit 3.0 Rectangle { id: content width: 800 height: 600 color: "black" WebView { id: webView anchors.fill: parent url: "qrc:/res/test.html" } }
I then created (using the Designer) a resource file that looks like this:
<RCC> <qresource prefix="/res"> <file>test.html</file> </qresource> </RCC>
and created a simple test.html file (in the same directory as the .qrc file):
<html> <head><title>Hello</title></head> <body> <h1>Hello World!</h1> </body> </html>
The result is just a blank white window. If I use a regular url (
http://www.stackoverflow.com
) in the qml file as the url it works - the page is displayed. If I use the name of an embedded image (qrc:/qt-project.org/mac/cursors/images/pluscursor.png
) that image is displayed.It looks to me as if the html file is indeed added (it is at least listed when I enumerate the embedded resources), but my understanding of the Qt resource system is limited, so I may very well have misunderstood something fundamental.
Can anyone tell me what I am doing wrong?
Update: I have verified that the behavior is the same if I attempt to tell the web view to load the url from C++ as well. I have also verified that the resource is indeed embedded - I can open and read the resource using a QResource. Also, this does not appear to be specific to Qt5: http://qt-project.org/forums/viewthread/18181 (someone having a similar problem with Qt 4.8).
-
villintehaspam over 11 yearsDo I understand you correctly that you are suggesting not to embed the resource, but instead leave it outside the application as a file on disk?
-
mlvljr almost 10 yearsif the qml file comes from resources itself, this must work :)
-
1x2x3x4x over 2 yearsCan I loadHtml like this? webView: loadHtml("<p>test</p>")