QWebEngineView C++和js交互

QWebEngine，QWebChannel简单使用。

0. QWebEngineView

pro文件中添加

1
QT       +=  webenginewidgets

.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#include <QWebEngineView>
#include <QUrl>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QWebEngineView* view = new QWebEngineView(this);
    view->load(QUrl::fromLocalFile(qApp->applicationDirPath() + "/2.html"));
    view->show();

    QVBoxLayout* layout = new QVBoxLayout;
    layout->setContentsMargins(0, 0, 0, 0);
    layout->addWidget(view);

    this->setLayout(layout);
    this->setFixedSize(800, 600);
}

需要在exe的路径下放入html和js文件以及Qt的qwebchannel.js

1.js调用C++

pro文件中添加

1
QT       += webenginewidgets webchannel
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class WebClass : public QObject
{
    Q_OBJECT
public:
    explicit WebClass(QObject *parent = nullptr);

signals:

public slots:
    void jscallme(const QString &text)
    {
        QMessageBox::information(nullptr, "jscallme", text);
    }

};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    webView = new QWebEngineView(this);
    webView->load(QUrl::fromLocalFile(qApp->applicationDirPath() + "/2.html"));

    webChannel = new QWebChannel(this);
    auto webobj = new WebClass(this);
    webChannel->registerObject("webobj", webobj);
    webView->page()->setWebChannel(webChannel);

    QVBoxLayout* layout = new QVBoxLayout;
    layout->setContentsMargins(0, 0, 0, 0);
    layout->addWidget(webView);

    QFrame* centerFrame = new QFrame(this);
    centerFrame->setLayout(layout);
    this->setCentralWidget(centerFrame);
    this->showMaximized();
}

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <script src="qwebchannel.js"></script> 
  <script type="text/javascript">
  new QWebChannel(qt.webChannelTransport,
  function(channel){
  var webobj = channel.objects.webobj;
  window.foo = webobj;
  webobj.jscallme('中文调用');;
  });
  </script>
</body>
</html>

2.c++调用js

直接调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    webView = new QWebEngineView(this);
    webView->load(QUrl::fromLocalFile(qApp->applicationDirPath() + "/2.html"));

    webChannel = new QWebChannel(this);
    auto webobj = new WebClass(this);
    webChannel->registerObject("webobj", webobj);
    webView->page()->setWebChannel(webChannel);

    QPushButton* button = new QPushButton("click me",this);

    QVBoxLayout* layout = new QVBoxLayout;
    layout->setContentsMargins(0, 0, 0, 0);
    layout->addWidget(button);
    layout->addWidget(webView);

    QFrame* centerFrame = new QFrame(this);
    centerFrame->setLayout(layout);
    this->setCentralWidget(centerFrame);
    this->showMaximized();

    connect(button, &QPushButton::clicked, [=](){
        webView->page()->runJavaScript("cppCallJs();",
                                       [this](const QVariant &v) {
            qDebug()<<v.toString();
        });
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <script src="qwebchannel.js"></script> 
  <script type="text/javascript">
      var cppCallJs=function()
      {	
         return "cppCassJs down!";
      }

      new QWebChannel(qt.webChannelTransport,
      function(channel){
      var webobj = channel.objects.webobj;
      window.foo = webobj;
      });

  </script>
</body>
</html>

信号

1
2
3
4
5
6
7
8
9
10
11
class WebClass : public QObject
{
    Q_OBJECT
public:
    explicit WebClass(QObject *parent = nullptr);
    void setContent(QString _content){emit contentChanged(_content);};

signals:
    void contentChanged(QString);
};

1
2
3
connect(button, &QPushButton::clicked, [=](){
    webobj->setContent("11111");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <script src="qwebchannel.js"></script> 
  <script type="text/javascript">

      var updateattribute=function(text)
      {	
        document.write(text);	
      }

      new QWebChannel(qt.webChannelTransport,
      function(channel){
      var webobj = channel.objects.webobj;
      window.foo = webobj;
      webobj.contentChanged.connect(updateattribute);

      });

  </script>
</body>
</html>

属性-信号

1
2
3
4
5
6
7
8
9
10
11
12
13
class WebClass : public QObject
{
    Q_OBJECT
public:
    explicit WebClass(QObject *parent = nullptr);
    Q_PROPERTY(QString content MEMBER content_ NOTIFY contentChanged)

signals:
    void contentChanged(QString);

private:
    QString content_;
};
1
2
3
connect(button, &QPushButton::clicked, [=](){
   webobj->setProperty("content", "222222");
});

参考

  1. myprogrammingnotes ↩
  2. csdn ↩
Qt QWebEngine
QWebEngine

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！