QWebEngineView与js交互

Qt新版本使用QWebEngineView来展示html页面对QWebView不再进行维护了,QWebEngineView使用chromium内核将带来更好的用户体验。

对QWebView感兴趣的可以参考:http://blog.csdn.net/tujiaw/article/details/50372892

从QWebView到QWebEngineView,参考:http://blog.csdn.net/tujiaw/article/details/52075495

  • C++调用js很简单

    m_view->page()->runJavaScript("showAlert()");
  • js调用C++函数

     QWebChannel *channel = new QWebChannel(this);
    channel->registerObject("bridge", (QObject*)bridge::instance());
    m_view->page()->setWebChannel(channel);

注意这个bridget类最好是从QObject继承,不要直接使用Dialog,否则你会看到一些莫名其妙的错误日志,而且使用一个中间类也可以解耦C++与js/html之间的逻辑

源码如下,地址:
main.cpp

#include "dialog.h"
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();

    return a.exec();
}

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include 

namespace Ui {
class Dialog;
}

class QWebEngineView;
class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;
    QWebEngineView *m_view;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"
#include <QWebEngineView>
#include <QWebChannel>
#include <QDir>
#include <QDebug>
#include "bridge.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    m_view = new QWebEngineView(this);
    QWebChannel *channel = new QWebChannel(this);
    channel->registerObject("bridge", (QObject*)bridge::instance());
    m_view->page()->setWebChannel(channel);
    m_view->page()->load(QUrl(QString("file:///%1/%2").arg(QApplication::applicationDirPath()).arg("index.html")));

    ui->viewLayout->addWidget(m_view);
    connect(ui->pbAlert, &QPushButton::clicked, [this]() {
        m_view->page()->runJavaScript("showAlert()");
    });
}

Dialog::~Dialog()
{
    delete ui;
}

bridge.h

#ifndef BRIDGE_H
#define BRIDGE_H

#include 

class bridge : QObject
{
Q_OBJECT
public:
    static bridge* instance();

public slots:
    void showMsgBox();

private:
    bridge();
};

#endif // BRIDGE_H

bridge.cpp

#include "bridge.h"
#include <QMessageBox>

bridge* bridge::instance()
{
    static bridge s_obj;
    return &s_obj;
}

bridge::bridge()
{
}

void bridge::showMsgBox()
{
    QMessageBox::aboutQt(0, tr("Qt"));
}

index.html


<html>
  <head>
    <meta charset="utf-8">
    <title>testtitle>
    <script src="./qwebchannel.js">script>
  head>
  <body style="background:#282c34;">
    <h3 style="color:#ffffff;">this is web pageh3>
    <input type="button" value="C++ function callback" onclick="onShowMsgBox()">
    <script>
      new QWebChannel(qt.webChannelTransport, function(channel) {
        window.bridge = channel.objects.bridge;
      })
      function onShowMsgBox() {
        if (bridge) {
          bridge.showMsgBox()
        }
      }

      function showAlert() {
        alert('this is web alert');
      }
    script>
  body>
html>

qwebchannel.js是Qt提供的可以在这里下载:https://code.csdn.net/tujiaw/webengineview/tree/master/qwebchannel.js

运行的时候index.html和qwebchannel.js这两个文件放在与exe同级目录下

你可能感兴趣的:(c/c++,qt)