QWebEngineView使用-Qt与Js相互调用

QWebengineView使用说明

使用Js调用Qt中类的原理，是在Qt中新建一个C++的类作为C++与Js的共同的类，这个类的父类是QObject，通过webChannel将这个类注册到Js中后，然后，将qtwebengineview的通道设置为webChannel，Js可以直接调用桥梁中的糟函数，再利用糟函数发出信号，再使用其它窗口接收这个类的信号，完成Js调用Qt中函数的作用。

详解

使用原理

使用Js调用Qt中类的原理，是在Qt中新建一个C++的类作为C++与Js的共同的类，这个类的父类是QObject，通过webChannel将这个类注册到Js中后，然后，将qtwebengineview的通道设置为webChannel，Js可以直接调用桥梁中的糟函数，再利用糟函数发出信号，再使用其它窗口接收这个类的信号，完成Js调用Qt中函数的作用。

代码

定义一个Qt调用Js的通道

文件名: webBridge.h
*****************************
class JsChannel : public QObject
{    
    Q_OBJECT
public:    
    explicit JsChannel(QObject *parent = nullptr);
public slots:
    //这个糟函数是给Js调用的，每当Js调用这个 jsCallme() 这个类就会在Qt中产生 JsSignal这个信号
    void jsCallme(){
        //这个发送到Js的信号
        emit JsSignal;
    }
signals:
    
};

将Qt中的类注册到Js中

    //通过webchannel将这个类注册到html
    JsChannel myChannel = new JsChannel();
    myChannel->registerObject("mybridge", myBridge);

    //让webengineview启用 channel
    ui->webEngineView->page()->setWebChannel(myChannel);

在html引入qtwebchanel

    html文件
    *****************************************
    <script src="js/qwebchannel.js"></script>

在 Js 中注册qt类, 并调用Qt中的方法。

new QWebChannel(qt.webChannelTransport,
    function (channel) {
        window.qtClass = channel.objects.mybridge;  //这个mybridge与第五步中引号中的内容相同
        qtClass.jsCallme('123');  //Js调用了JsCallme的函数，此时WebChannel会发送JsSignal信号。
    });
    

Qt调用 Js 中的方法

ui->webEngineView->page()->runJavaScript(<js函数>)