KcFnMi KcFnMi - 2 months ago 42
Javascript Question

QWebView not loading external javascript?

It is possible to load an external javascript file from the html using QWebView?

In the following QtProject (all files in the same directory) there is javascript code directly inside the html and also in an external file. I'm missing the external behavior while loading it in QWebView (in the browser it works fine):

MyApp.pro

QT += core gui webkitwidgets

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = MyApp
TEMPLATE = app
DESTDIR = ./

SOURCES += main.cpp

HEADERS +=


main.cpp

#include <QApplication>
#include <QtWebKitWidgets>
#include <QFile>

int main(int argc, char *argv[])
{
QApplication a(argc, argv);

QWebView *view = new QWebView;
view->show();

QFile file("qt.html");

if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
return -1;

QString html = QTextStream(&file).readAll();
view->setHtml(html);

return a.exec();
}


qt.html

<html>

<head>
<script type="text/javascript" src="qt.js">
</script>
</head>

<body onload="hello()">

Test..


<script>
alert("Hello World INTERNAL!");
</script>

</body>
</html>


qt.js

function hello() {
alert("Hello World EXTERNAL!");
}

Answer

Alternatively 1:

It seems the javascript isn't evaluated from the html. In other words, the following has no effect:

<script type="text/javascript" src="qt.js">
</script>

It must be done explicitly:

QString js = readFile("qt.js");
view->page()->mainFrame()->evaluateJavaScript(js);

And, there is no need to set baseUrl in setHtml().

Alternatively 2:

Use the QRC System and set the baseUrl in setHtml. This way doesn't require a call to view->page()->mainFrame()->evaluateJavaScript();

//    QString js = readFile(":/qt.js");
//    view->page()->mainFrame()->evaluateJavaScript(js);

    QString html = readFile(":/qt.html");
    view->setHtml(html, QUrl("qrc:/"));

application.qrc

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
    <file alias="qt.png">resource/qt.png</file>
    <file alias="image.html">resource/image.html</file>
    <file alias="qt.html">resource/qt.html</file>
    <file alias="qt.js">resource/qt.js</file>
</qresource>
</RCC>
Comments