How to display a QWebEngineView in Qt mainwindow?

Question

My webview function with the following code in my main.cpp :

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);

   QWebEngineView view;
   view.setUrl(QUrl(QStringLiteral("http://qt-project.org/")));
   view.show();
   return app.exec();
}

However, I want to have a MainWindow view and embed my web view in a specific widget inside my mainwindow.cpp. Here is the code that doesn't work and I'm a bit mixed up with the parent attribut and the object to put in my mainwindow.ui (design tool).

QWebEngineView *view = new QWebEngineView(parent);
ui->webView->load(QUrl("http://qt-project.org/"));
view->show();

Here is the code for a similar widget that displayed correctly in my project :

QMovie *load = new QMovie(":/animations/scanner.gif");
ui->movieView->setMovie(load);
load->start();

Answer 1

You would either use your view as the central widget or put it into a layout if you need more than just a central widget directly in your mainwindow.

Central Widget

#include <QApplication>
#include <QMainWindow>

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);
   QMainWindow mainWindow;
   QWebEngineView view;
   view.setUrl(QUrl(QStringLiteral("http://qt-project.org/")));
   mainWindow.setCentralWidget(view);
   mainWindow.show();
   return app.exec();
}

Layout

#include <QApplication>
#include <QMainWindow>

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);
   QMainWindow mainWindow;
   QWebEngineView view;
   view.setUrl(QUrl(QStringLiteral("http://qt-project.org/")));
   mainWindow.layout()->addWidget(view);
   mainWindow.show();
   return app.exec();
}

These are just examples with standard QMainWindows, as we do not have access to your mainwindow.cpp, and it should not matter much either. You can apply these concepts in your mainwindow.cpp just as well.

Similarly, you can also have layouts inside other children, grandchildren, etc, widgets of your mainwindow instance.

Answer 2

I tested using Qt 6.6.1 and MSVC2019 64bit. Note: MinGW does not include QWebEngineView. I used qmake, so I added 'webenginewidgets' to the .pro file. The relevant parts are these two lines:

QT += core gui webenginewidgets  
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets webenginewidgets

If you forget 'webenginewidgets' you'll get linker errors using Qt Creator. (unresolved external symbol ... QWebEngineView...)

main.cpp doesn't require any mention of your QWebEngineView.

Because you want to use a widget in your MainWindow class, put a pointer to the 'view' in your MainWindow.h. In your MainWindow.cpp constructor, 'new' the view and set its parent to the ui->widget you have. Also delete 'view' pointer in the destructor, ~MainWindow().

Then in the constructor (or wherever is appropriate):

1. view->load(...) the url
2. size the view->resize(ui->widget-size())
3. view->show() the website.

If you forget to size the view you're likely to get a tiny image of the url in your ui->widget.

The source code ...

WebViewer.pro - assumes app name WebViewer

QT += core gui webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets webenginewidgets

CONFIG += c++17
SOURCES += \
  main.cpp \
  MainWindow.cpp
HEADERS += \
  MainWindow.h
FORMS += \
  MainWindow.ui

TRANSLATIONS += \
  WebViewer_en_US.ts
CONFIG += lrelease
CONFIG += embed_translations

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

MainWindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>602</width>
    <height>436</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QWidget" name="webWidget" native="true">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>10</y>
      <width>581</width>
      <height>411</height>
     </rect>
    </property>
   </widget>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

main.cpp

#include "MainWindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

MainWindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtWebEngineWidgets/QWebEngineView>

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
  Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
private:
   Ui::MainWindow *ui;
    QWebEngineView *view = nullptr; // *add this*
};
#endif // MAINWINDOW_H

MainWindow.cpp

#include "MainWindow.h"
#include "ui_MainWindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
    , view(nullptr)
{
  ui->setupUi(this);

  if (ui->webWidget)
  {
     view = new QWebEngineView(ui->webWidget);
      view->load(QUrl("http://qt-project.org/"));
      view->resize(ui->webWidget->size());
      view->show();
  }
}
MainWindow::~MainWindow()
{
    delete ui;
    delete view;
}