Qt Reference Documentation

QML WebView Element

The WebView item allows you to add web content to a canvas. More...

Inherits Item

  • List of all members, including inherited members
  • Properties



    Detailed Description

    A WebView renders web content based on a URL.

    This type is made available by importing the QtWebKit module:

    import QtWebKit 1.0

    If the width and height of the item is not set, they will dynamically adjust to a size appropriate for the content. This width may be large for typical online web pages.

    If the width or height is explictly set, the rendered website will be clipped, not scaled, to fit into the set dimensions.

    If the preferredWidth is set, the width will be this amount or larger, usually laying out the web content to fit the preferredWidth.

     import QtWebKit 1.0
     WebView {
         url: "http://www.nokia.com"
         preferredWidth: 490
         preferredHeight: 400
         scale: 0.5
         smooth: false
         smoothCache: true

    The item includes no scrolling, scaling, toolbars, etc., those must be implemented around WebView. See the WebBrowser example for a demonstration of this.

    When this item has keyboard focus, all keyboard input will be sent directly to the web page within.

    See also WebView example and Web Browser demo.

    Property Documentation

    read-onlyback : action

    This property holds the action for causing the previous URL in the history to be displayed.

    read-onlyforward : action

    This property holds the action for causing the next URL in the history to be displayed.

    html : string

    This property holds HTML text set directly

    The html property can be set as a string.

     WebView {
         html: "<p>This is <b>HTML</b>."

    read-onlyicon : pixmap

    This property holds the icon associated with the web page currently viewed

    read-onlyjavaScriptWindowObjects : list<object>

    A list of QML objects to expose to the web page.

    Each object will be added as a property of the web frame's window object. The property name is controlled by the value of WebView.windowObjectName attached property.

    Exposing QML objects to a web page allows JavaScript executing in the web page itself to communicate with QML, by reading and writing properties and by calling methods of the exposed QML objects.

    This example shows how to call into a QML method using a window object.

     WebView {
         javaScriptWindowObjects: QtObject {
             WebView.windowObjectName: "qml"
             function qmlCall() {
                 console.log("This call is in QML!");
         html: "<script>console.log(\"This is in WebKit!\"); window.qml.qmlCall();</script>"

    The output of the example will be:

     This is in WebKit!
     This call is in QML!

    If Javascript is not enabled for the page, then this property does nothing.

    newWindowComponent : component

    This property holds the component to use for new windows. The component must have a WebView somewhere in its structure.

    When the web engine requests a new window, it will be an instance of this component.

    The parent of the new window is set by newWindowParent. It must be set.

    newWindowParent : item

    The parent item for new windows.

    See also newWindowComponent.

    preferredHeight : int

    This property holds the ideal height for displaying the current URL. This only affects the area zoomed by heuristicZoom().

    preferredWidth : int

    This property holds the ideal width for displaying the current URL.

    pressGrabTime : int

    The number of milliseconds the user must press before the WebView starts passing move events through to the web engine (rather than letting other QML elements such as a Flickable take them).

    Defaults to 400ms. Set to 0 to always grab and pass move events to the web engine.

    read-onlyprogress : real

    This property holds the progress of loading the current URL, from 0 to 1.

    If you just want to know when progress gets to 1, use WebView::onLoadFinished() or WebView::onLoadFailed() instead.

    read-onlyreload : action

    This property holds the action for reloading with the current URL

    settings.standardFontFamily : string

    settings.fixedFontFamily : string

    settings.serifFontFamily : string

    settings.sansSerifFontFamily : string

    settings.cursiveFontFamily : string

    settings.fantasyFontFamily : string

    settings.minimumFontSize : int

    settings.minimumLogicalFontSize : int

    settings.defaultFontSize : int

    settings.defaultFixedFontSize : int

    settings.autoLoadImages : bool

    settings.javascriptEnabled : bool

    settings.javaEnabled : bool

    settings.pluginsEnabled : bool

    settings.privateBrowsingEnabled : bool

    settings.javascriptCanOpenWindows : bool

    settings.javascriptCanAccessClipboard : bool

    settings.developerExtrasEnabled : bool

    settings.linksIncludedInFocusChain : bool

    settings.zoomTextOnly : bool

    settings.printElementBackgrounds : bool

    settings.offlineStorageDatabaseEnabled : bool

    settings.offlineWebApplicationCacheEnabled : bool

    settings.localStorageDatabaseEnabled : bool

    settings.localContentCanAccessRemoteUrls : bool

    These properties give access to the settings controlling the web view.

    See QWebSettings for details of these properties.

     WebView {
         settings.pluginsEnabled: true
         settings.standardFontFamily: "Arial"

    read-onlystatusText : string

    This property is the current status suggested by the current web page. In a web browser, such status is often shown in some kind of status bar.

    read-onlystop : action

    This property holds the action for stopping loading with the current URL

    read-onlytitle : string

    This property holds the title of the web page currently viewed

    By default, this property contains an empty string.

    url : url

    This property holds the URL to the page displayed in this item. It can be set, but also can change spontaneously (eg. because of network redirection).

    If the url is empty, the page is blank.

    The url is always absolute (QML will resolve relative URL strings in the context of the containing QML document).

    Signal Documentation

    WebView::onAlert ( message )

    The handler is called when the web engine sends a JavaScript alert. The message is the text to be displayed in the alert to the user.

    WebView::onDoubleClick ( clickx, clicky )

    The WebView does not pass double-click events to the web engine, but rather emits this signals.

    WebView::onLoadFailed ()

    This handler is called when the web engine fails loading a page or any component content (WebView::onLoadFinished() will be emitted on success).

    WebView::onLoadFinished ()

    This handler is called when the web engine successfully finishes loading a page, including any component content (WebView::onLoadFailed() will be emitted otherwise).

    See also progress.

    WebView::onLoadStarted ()

    This handler is called when the web engine begins loading a page. Later, WebView::onLoadFinished() or WebView::onLoadFailed() will be emitted.

    Method Documentation

    bool WebView::evaluateJavaScript ( string )

    Evaluates the scriptSource JavaScript inside the context of the main web frame, and returns the result of the last executed statement.

    Note that this JavaScript does not have any access to QML objects except as made available as windowObjects.

    bool WebView::heuristicZoom ( clickX, clickY, maxzoom )

    Finds a zoom that:

    • shows a whole item
    • includes (clickX, clickY)
    • fits into the preferredWidth and preferredHeight
    • zooms by no more than maxZoom
    • is more than 10% above the current zoom

    If such a zoom exists, emits zoomTo(zoom,centerX,centerY) and returns true; otherwise, no signal is emitted and returns false.


    Thank you for giving your feedback.

    Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.

    [0]; s.parentNode.insertBefore(ga, s); })();