QWebView + Qt aware HTML



  • Dear Trolls,

    I'm using an HTML website altogether with a QWebView. It's working pretty well so far but I have a special request.

    In my HTML / CSS At some point I need to know whether I'm using the Qt Webview or another browser.

    Can I hope to use a conditionnal expression like this :

    @<!--[if myQtWebView]><style>body { padding:4px; }</style><![endif]-->@

    Thanks.



  • Just as workaround if you need to be aware of using website in qwebview in your application then you can inject some javascript and work with it. So for example you injecting some js with variable and in website js checking for it existing.



  • bq. injecting some js with variable and in website js checking for it existing.

    I see the idea and I might consider it. I try to apply changes to the HTML and CSS of the document itself, I can't really wait for my document to be scriptable.

    Basically when ran from the web I show an img banner and if it's from the app this should be hidden. If I do this through javascript the view could flicker. What do you think ?

    I would rather need something that can be checked before the document is scriptable.



  • What if you take the problem the other way around and define special CSS classes on your QWebView? You could have a userStyleSheetUrl with a stylesheet like this:
    @.qtwebkit_hidden { display: none; }@

    If you use the class qtwebkit_hidden, a regular browser won't do anything with it, while your webview has some CSS for it.



  • @Benjamin Poulain: Sounds like a very good idea.

    I didn't think about the "display: none" on the QWebView / CSS side. I guess I'm more a C++ minded coder than a web designer after all :).

    Thanks.

    @Denis: Thanks.



  • I've implemented the "setUserStyleSheetUrl" and it's working like a charm.

    In a perfect world, I would like my CSS to be loaded after all my page's CSS and not before. Otherwise my page's CSS overwrites a few of my userStyleSheet changes.

    Is it possible to achieve that ? for example through a special web plugin ?



  • bq. In a perfect world, I would like my CSS to be loaded after all my page’s CSS and not before. Otherwise my page’s CSS overwrites a few of my userStyleSheet changes.

    This not the way user stylesheet are defined, you can have a look at the constructor of CSSStyleSelector for the details.

    If you want to impose your stylesheet on top of the document's style, you will have to set the style directly on the elements with the attribute "style" (you can do that with QWebElement via QWebElement::setStyleProperty()).

    If the content does not have elements with the style attribute, you can try a work around with [removed] insert an event handler for "DOMContentLoaded" and insert a new "style" block in the header (you can do that with QWebFrame::evaluateJavaScript().)
    That start to be a bit hackish I have to say, and this might cause multiple layout of the page. I can't think of another way right now, if you are aware of a WebKit port doing otherwise, you can look at how it does that.



  • I'll take a deeper look into the way user stylesheets are defined by Webkit.

    bq. If you want to impose your stylesheet on top of the document’s style, you will have to set the style directly on the elements with the attribute “style” (you can do that with QWebElement via QWebElement::setStyleProperty()).

    To solve my problem I found a dirty yet functional hack: the !important CSS flag. Using it I can force my user stylesheet to prevail:

    @body {
    width: 100% !important;
    }@

    Thanks for the great support here.

    B.A.



  • Yep, that is a good idea. That also avoid the double layout problem of my suggestion. As long as the CSS of the page does not use !important, that should do the trick.


Log in to reply
 

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