October 25, 2010

bunjee bunjee
Lab Rat
79 posts

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 :

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

Thanks.

8 replies

October 25, 2010

Denis Kormalev Denis Kormalev
Lab Rat
1607 posts

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.

October 25, 2010

bunjee bunjee
Lab Rat
79 posts

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.

October 25, 2010

Benjamin Poulain Benjamin Poulain
Lab Rat
144 posts

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:

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

October 25, 2010

bunjee bunjee
Lab Rat
79 posts

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

October 25, 2010

bunjee bunjee
Lab Rat
79 posts

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 ?

October 25, 2010

Benjamin Poulain Benjamin Poulain
Lab Rat
144 posts

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.

October 26, 2010

bunjee bunjee
Lab Rat
79 posts

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

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:

  1. body {
  2. width: 100% !important;
  3. }

Thanks for the great support here.

B.A.

October 26, 2010

Benjamin Poulain Benjamin Poulain
Lab Rat
144 posts

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.

 
  ‹‹ Webkit, Disable selection      QGraphicsWebView and CSS hover ››

You must log in to post a reply. Not a member yet? Register here!