Qt與Js相互呼叫

使用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函式>)