0

I am using QWebView to display html pages. I am using Twitter bootstrap 3.2 as the UI framework. I find that pages are displayed differently when viewed in FF and Chrome, than when rendered by QWebView in my application. Both FF and Chrome render the html pages fairly similarly, however in QWebView, even the fonts used etc are different.

This leads me to think that QWebView is applying its own defaults to the loaded html document.

Here is how QWebView is being instansiated in my application:

m_viewer = new QWebView();

//Disable Reload RH mouse click on browser view
m_viewer->page()->action(QWebPage::Reload)->setVisible(false);

// set blank sheet (to prevent flicker when startup screen is shown)
m_viewer->setHtml("<html><body></body></html>");

setCentralWidget(m_viewer);

I use setHtml() to load a new page.

Here is sample HTML I use to test the required functionality

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="refresh" content="5; url=login.html" >
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dummy Demo</title>
        <style type="text/css">
            body { -webkit-user-select: none; }
        </style>
        <link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body ondragstart="return false">
        <div class="container">
            <div class="hero-unit">
                <h1>Well, do you feel lucky Punk?!</h1>
                <p>Lorem ipsum etc cetera ...</p>
            </div>
            <hr />
            <div class="footer">
                <div class="span4">&copy Me, myself &amp; I 2014</div>
                <div class="span4"></div>
                <div class="span4"></div>
            </div>
        </div>
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>        
    </body>
</html>

I have two questions:

  1. Is there something like Firebug that I could use to inspect the loaded document in QWebView?. Failing that, how do I confirm that stylesheets and JavaScript referenced in the loaded document have been loaded successfully?

  2. Is there a way to switch off ALL styling defaults in QWebView?

msrd0
  • 7,816
  • 9
  • 47
  • 82
Homunculus Reticulli
  • 65,167
  • 81
  • 216
  • 341

1 Answers1

0

  1. QWebSettings::globalSettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true) should add an "Inspect" context menu that will pop a default QWebInspector window where you can see what happens to the HTML document.

  2. Most of the default fonts and styling can be adjusted through QWebSettings

Depending on your OS, QtWebKit might take default settings from the desktop environment that FF or Chrome wouldn't (e.g. if you're using KDE). Otherwise it could plainly be a bug, QtWebKit doesn't receive as much testing as official browsers from web framework developers.

jturcotte
  • 1,273
  • 9
  • 9
  • Thanks, regarding the settings, can I simply ask qwebview to NOT use any default settings at all?. I want all the styling to be done using CSS – Homunculus Reticulli Oct 12 '14 at 13:40
  • 1
    I don't think that the standard defines what those default should be, all browsers have default settings. If you mean to get QtWebKit to use the same defaults as Chrome and FF you should be able to do so by tweaking QWebSettings. It might be possible to use the information from http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements and apply it to your QWebView through QWebSettings::setUserStyleSheetUrl. It's also possible that font-names won't resolve to the same fonts as with FF and Chrome, this might be difficult to get perfect. – jturcotte Oct 12 '14 at 13:59