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:

    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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.