Qt 5.13 | Qt WebEngine | WebEngine Qt Quick Minimal Example

Qt 5.13.2 Reference Documentation

# WebEngine Qt Quick Minimal Example

Displays a web page using the Qt Quick integration of Qt WebEngine.

WebEngine Qt Quick Minimal Example demonstrates how to use the WebEngineView item to render a web page. It shows the minimum amount of code needed to load and display an HTML page, and can be used as a basis for further experimentation.

#### Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

#### C++ Code

In `main.cpp` we use only the QGuiApplication and QQmlApplicationEngine classes. We also include `qtwebengineglobal.h` to be able to use QtWebEngine::initialize.

      #include <QGuiApplication>
      #include <QQmlApplicationEngine>
      #include <qtwebengineglobal.h>

In the `main` function we first set the QCoreApplication::organizationName property. This affects the locations where Qt WebEngine stores persistent and cached data (see also WebEngineProfile::cachePath and WebEngineProfile::persistentStoragePath).

We also set the Qt::AA_EnableHighDpiScaling attribute. This lets the web view automatically scale on high-dpi displays. Then we instantiate a QGuiApplication object.

Next, we call QtWebEngine::initialize, which makes sure that OpenGL contexts can be shared between the main process and the dedicated renderer process (`QtWebEngineProcess`). This method needs to be called before any OpenGL context is created.

Then we create a QQmlApplicationEngine, and tell it to load `main.qml` from the Qt Resource System.

Finally, QGuiApplication::exec() launches the main event loop.

      int main(int argc, char *argv[])
      {
          QCoreApplication::setOrganizationName("QtExamples");
          QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
          QtWebEngine::initialize();
          QGuiApplication app(argc, argv);

          QQmlApplicationEngine engine;
          engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

          return app.exec();
      }

#### QML Code

In `main.qml` we create the top level window, set a sensible default size and make it visible. The window will be filled by a WebEngineView item loading the Qt Homepage.

      import QtQuick 2.0
      import QtQuick.Window 2.0
      import QtWebEngine 1.0

      Window {
          width: 1024
          height: 750
          visible: true
          WebEngineView {
              anchors.fill: parent
              url: "https://www.qt.io"
          }
      }

#### Requirements

The example requires a working internet connection to render the Qt Homepage. An optional system proxy should be picked up automatically.

Example project @ code.qt.io