How to display embedded html in Qt WebView

Question

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

have you added the resource file you created to your .pro file? — Castilho
– Castilho, Commented Jan 2, 2013 at 15:04
@Castilho: Yes, and I have verified that the html file actually ended up as a resource in the file. — villintehaspam
– villintehaspam, Commented Feb 17, 2013 at 19:09
setting html with what you get, say, from a backend function reading the embedded resource, might be a simple answer (in case someone wonders) — mlvljr
– mlvljr, Commented Aug 28, 2014 at 22:56

S.M.Mousavi · Accepted Answer · 2013-08-27 22:13:45Z

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

answered Aug 27, 2013 at 22:13

S.M.Mousavi

5,2667 gold badges47 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lesyk · Accepted Answer · 2015-11-30 15:56:36Z

2

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
}

edited Nov 30, 2015 at 15:56

lesyk

4,1473 gold badges28 silver badges40 bronze badges

answered Jul 21, 2015 at 7:29

Libor Tomsik

7288 silver badges27 bronze badges

Comments

villintehaspam · Accepted Answer · 2015-11-26 15:24:14Z

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.

answered Nov 26, 2015 at 15:24

villintehaspam

8,7766 gold badges50 silver badges76 bronze badges

Comments

Vi. · Accepted Answer · 2018-04-27 08:08:36Z

1

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

answered Apr 27, 2018 at 8:08

Vi.

2913 silver badges11 bronze badges

1 Comment

1x2x3x4x Over a year ago

Can I loadHtml like this? webView: loadHtml("<p>test</p>")

Max Go · Accepted Answer · 2017-05-11 10:26:30Z

0

Embedded resources URLs loading support by web engine is available in latest Qt at least for WebEngineView in QML. I was not able to find official documentation about this, but one official sample loads page from resources:

WebEngineView {

    url: "qrc:/index.html"
...
}

It works for me with Qt 5.8.0 as well.

answered May 11, 2017 at 10:26

Max Go

2,1121 gold badge16 silver badges26 bronze badges

Comments

SourabhKus · Accepted Answer · 2017-05-15 12:50:44Z

0

You can put below line just after QApplication a(argc, argv);

QtWebView::initialize();

edited May 15, 2017 at 12:50

answered May 10, 2017 at 7:07

SourabhKus

8388 silver badges24 bronze badges

Comments

B.G. · Accepted Answer · 2013-01-07 21:26:15Z

-1

why not just use

url: "res/test.html"

instead of

url: "qrc:/res/test.html"

?

Then you would not need to use any resource files

answered Jan 7, 2013 at 21:26

B.G.

172 bronze badges

2 Comments

villintehaspam Over a year ago

Do 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 Over a year ago

if the qml file comes from resources itself, this must work :)

Elias Fazel · Accepted Answer · 2015-07-08 22:23:38Z

-1

Just use Path-To-File & If you saved it in project directory, just set name of file url: "/res/test.html"

& if file is in project directory url: "test.html"

answered Jul 8, 2015 at 22:23

Elias Fazel

11 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to display embedded html in Qt WebView

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related