Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct
How to display HTML content?
-
I have to display HTML content received in a JSON object in cross platform way (Qt 5.4) but mainly on Android, WP and iOS.
AFAIK there are three options (http://blog.qt.digia.com/blog/2014/12/10/qt-5-4-released/) but none of them works for me fine:
- WebKit based WebView:http://doc-snapshot.qt-project.org/qt5-5.4/qml-qtwebkit-webview.html has loadHtml method that works fine on my W7 installation of Qt but no success on Android device. Anyway, Webkit is not the most future proof solution either
- WebView:http://doc.qt.io/qt-5/qml-qtwebview-webview.html of Qt5.4 would be perfect solution if content is behind and URL but there is no 'loadHtml' method
- WebEngineView does not really good either - too heavy, not really OK for mobile stuff and no method for loading HTML directly but via URL only
What other solution exists I missed?
-
Hi,
Check QtQuick's "Text element":http://doc.qt.io/qt-5/qml-qtquick-text.html. It supports a subset of HTML. Maybe it is good enough for you.
-
thanks for your hep, TextElement is not an option because there is simple javascript in the HTML to be displayed.
E.g:
@
<html><body>[removed]var vserv_impression_urlsc65b3672 = new Array('http://img.vserv.mobi/b.gif?d=1&app=1');var vserv_click_urlc65b3672 = new Array("http:/c.vserv.mobi/delivery/ck.php?p=2__b=227362__zoneid=112218__OXLCA=1__cb=c65b3672__dc=60__cd=4-1403183890__mser=cdn__vuid=ff09b0c1f3383b9f7a11591282d5cc6883223abf__r=&app=1&trackonly=1");var vserv_click_trackersc65b3672 = new Array();var vserv_click_urlsc65b3672 = vserv_click_urlc65b3672.concat(vserv_click_trackersc65b3672);var vservImpressionCallc65b3672=0;var vservImpressionHitc65b3672=0;function vservNotifyc65b3672(notifyUrls){vservNotifyc65b3672(notifyUrls,0);}function vservNotifyc65b3672(notifyUrls,action){var shortlistc65b3672 = new Array();var counterc65b3672 = 0;vservImpressionCallc65b3672++;if(((typeof(vservIsCachingEnabled) != 'undefined' && vservIsCachingEnabled==1 && vservImpressionCallc65b3672 <= 1) || vservImpressionHitc65b3672>0 ) && (action==0 || typeof(action) == 'undefined')){return;}vservImpressionHitc65b3672++;for(var i=0; i < notifyUrls.length; i++){var vservUrlPatternc65b3672 = /^((http|https):)/;if(vservUrlPatternc65b3672.test(notifyUrls[i])) {shortlistc65b3672.push(notifyUrls[i]);}}for(var i=0; i < shortlistc65b3672.length; i++){var ImageObject = new Image();ImageObject.src = shortlistc65b3672[i];if(action == 1){ImageObject.onload = ImageObject.onerror = function(){counterc65b3672++;if(counterc65b3672 >= shortlistc65b3672.length){mraid.open('http://google.com');}}}}}function vservActionc65b3672(){vservNotifyc65b3672(vserv_click_urlsc65b3672,1);}vservNotifyc65b3672(vserv_impression_urlsc65b3672);var vservad_markupc65b3672 = '';vservad_markupc65b3672 += '<a href="[removed]vservActionc65b3672();">';vservad_markupc65b3672 += '<img src="http://img.vserv.mobi/i/320x480_f/f40dc397bd388985104032b5162ab068.jpg?112218_227362_c65b3672" alt="" border="0" />';vservad_markupc65b3672 += '</a>';removed;[removed]</body></html>
@
-
If you have such "complex" html contect with JS and all, than I guess you can't avoid a proper web engine. You could deliver this content with a simple HTTP server instead of downloading it within JSON, presumably, over TCP. There more than one Qt-based projects you may want to look into:
-
JSON is result of an API request, I have zero influence either on its content or the delivery model.
I have to write a client that display content the received HTML - nothing more, nothing less...
-
URL doesn't mean an address that is on the web. file://some_path.html is also a URL. I'd suggest that you save the HTML somewhere and check which one of the options you listed can load it.
-
Yes, saving it into a local file came into my mind earlier, too - but it did not seemed to be optimal solution when we have such fancy tools to be used... :D
Not to mention saving it into file raise the question where to save it - in cross-platform manner... :-(
-
maybe "QTemporaryFile":http://doc.qt.io/qt-5/qtemporaryfile.html will be my friend...
-
Also check out "QStandardPaths":http://doc.qt.io/qt-5/qstandardpaths.html#StandardLocation-enum. It seems to be supported on Android. Maybe it also works on iOS and WinPhone but docs are not updated yet.
-
Why do you think WebView doesn't have a loadHtml method?
It does: http://doc.qt.io/qt-5/qml-qtwebkit-webview.html#loadHtml-method
So does WebEngineView.
-
WebKit variant of WebView has that method but as I read the documentation it is neither the preferred, nor the futureproof way to go...
The documentation is misleading (wrong), the "'new' WebView":http://doc.qt.io/qt-5/qml-qtwebview-webview.html - as "WebEngineView":http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html - has no such method... :-(
-
bq. The documentation is misleading (wrong), the ‘new’ WebView [doc.qt.io] – as WebEngineView [doc.qt.io] – has no such method… :-(
I guess I don't understand what you're talking about. If you follow your own link to the WebEngineView docs, there's a loadHtml method listed:
http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#loadHtml-method
It's there. It works. I use it every day.
-
-- remove --
due to misunderstanding =)
-
[quote author="wpurvis" date="1421678385"]bq. The documentation is misleading (wrong), the ‘new’ WebView [doc.qt.io] – as WebEngineView [doc.qt.io] – has no such method… :-(
I guess I don't understand what you're talking about. If you follow your own link to the WebEngineView docs, there's a loadHtml method listed:
http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#loadHtml-method
It's there. It works. I use it every day.
[/quote]
But that is the 'old' WebView (WebKit based, I guess).
The new, preferred, availaable in mobile environment is "this one":http://doc.qt.io/qt-5/qml-qtwebview-webview.html , as I linked earlier...
Anyway, new WebView combined with QTemporaryFile did the trick.
Unfortunately it works only in Android emulator but not in real device - since responseText attribute of "XMLHttpRequest":http://doc.qt.io/qt-5/qtqml-javascript-qmlglobalobject.html contains full, expected response on Android emulator but it contains ' ' only on real Nokia X device... :-(
Here it is the getter, I guess it should be O.K...
@function httpGet(request, timeout, storage, target)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp["storage"] = storage
xmlHttp["target"] = target
xmlHttp.timeout = timeout;
xmlHttp.onreadystatechange = function () {
if (xmlHttp.DONE === xmlHttp.readyState)
{
var responseInJsonFormat = JSON.parse(xmlHttp.responseText)
var statusCode = responseInJsonFormat["status"]
var html = responseInJsonFormat["ad"]var contentLocation = xmlHttp.storage.pushContent(html)
xmlHttp.target.url = "file://"+contentLocation
}
else
{
console.debug("too early - xmlHttp.readyState: ", xmlHttp.readyState)
}
};xmlHttp.open( "GET"
, request
, true // asynchronous call
);
xmlHttp.send( null );
return xmlHttp
}@
-
[quote author="zlutor" date="1422528259"]
[quote author="wpurvis" date="1421678385"]bq. The documentation is misleading (wrong), the ‘new’ WebView [doc.qt.io] – as WebEngineView [doc.qt.io] – has no such method… :-(I guess I don't understand what you're talking about. If you follow your own link to the WebEngineView docs, there's a loadHtml method listed:
http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#loadHtml-method
It's there. It works. I use it every day.
[/quote]
But that is the 'old' WebView (WebKit based, I guess).
The new, preferred, availaable in mobile environment is "this one":http://doc.qt.io/qt-5/qml-qtwebview-webview.html , as I linked earlier...
Anyway, new WebView combined with QTemporaryFile did the trick.
Unfortunately it works only in Android emulator but not in real device - since responseText attribute of "XMLHttpRequest":http://doc.qt.io/qt-5/qtqml-javascript-qmlglobalobject.html contains full, expected response on Android emulator but it contains ' ' only on real Nokia X device... :-(
Here it is the getter, I guess it should be O.K...
@function httpGet(request, timeout, storage, target)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp["storage"] = storage
xmlHttp["target"] = target
xmlHttp.timeout = timeout;
xmlHttp.onreadystatechange = function () {
if (xmlHttp.DONE === xmlHttp.readyState)
{
var responseInJsonFormat = JSON.parse(xmlHttp.responseText)
var statusCode = responseInJsonFormat["status"]
var html = responseInJsonFormat["ad"]var contentLocation = xmlHttp.storage.pushContent(html)
xmlHttp.target.url = "file://"+contentLocation
}
else
{
console.debug("too early - xmlHttp.readyState: ", xmlHttp.readyState)
}
};xmlHttp.open( "GET"
, request
, true // asynchronous call
);
xmlHttp.send( null );
return xmlHttp
}@[/quote]Have you tried this on iOS?
-
[quote author="onek24" date="1422532946"]
Have you tried this on iOS?
[/quote]No, unfortunately not - I have no access to any iOS thingy...
-
How can I determine user agent - e.g. the one used by "WebView":http://doc.qt.io/qt-5/qml-qtwebview-webview.html - in Qt5.4?
-
Mea maxima culpa, it work on real Android device, too!
What a lame error I made - WiFi was off... :D
