QT通过JS与HTML的交互

头文件加入

QT       += core gui webenginewidgets webchannel

通过QWebChannel与JS交互原理

   QWebEnginePage *page = new QWebEnginePage(this);
    webView->setPage(page);
    webView->load(QUrl("qrc:/html/index.html"));
    webView->show();
    QWebChannel *channel = new QWebChannel(this);
    //注册一个content  这里的内容通过JS的content来获取
    channel->registerObject(QString("content"),this);
    page->setWebChannel(channel);

注意：一定要先给WebView设置page，在加载网页，否则网页出不来！

QT发送信息到JS：

signals:
    void sendText(const QString &s_user,const QString &s_pwd);
//点击按钮 设置发送的文本
void MainWindow::callJSBtnClicked()
{
    //emit sendText(user->text(),password->text());
    sendText(user->text(),password->text());
    user->setText("");
    password->setText("");
}

QT接收到JS的信息

public slots:
    void receiveText(const QString &r_user,const QString &r_pwd);

void MainWindow::receiveText(const QString &r_user, const QString &r_pwd)
{
    user->setText(r_user);
    password->setText(r_pwd);
}

JS中对信息的操作

window.onload = function () {
    new QWebChannel(qt.webChannelTransport,function (channel) {
        var content = channel.objects.content;
        //接收QT发送来的
        content.sendText.connect(function (s_user, s_pwd) {
            document.getElementById("userName").value = s_user;
            document.getElementById("userPwd").value = s_pwd;
        })
        //传给QT
        document.getElementById("submit").onclick = function () {
               var userName = document.getElementById("userName").value;
               var userPwd = document.getElementById("userPwd").value;
               document.getElementById("userName").value = "";
               document.getElementById("userPwd").value = "";
               content.receiveText(userName,userPwd);
        }
    })
}

在MainWindow中关闭连接

MainWindow::~MainWindow()
{
    this->disconnect();
}