将数据从html传递到QT

Question

我使用提交按钮在html中创建了一个简单的登录表单，单击该表单时，Javascript函数会检查登录是否正确。
全部将所有文件放入QT中的qrc文件中，我编写了以下代码来运行程序：

login.pro

QT += webenginewidgets core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = login
TEMPLATE = app

DEFINES += QT_DEPRECATED_WARNINGS

SOURCES += \
        main.cpp \
        mainwindow.cpp

HEADERS += \
        mainwindow.h

FORMS += \
        mainwindow.ui

RESOURCES += \
    login.qrc

---

主窗口

 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QtWebEngineWidgets> namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); public slots: void connectToJs(bool result, QWebEngineView *view); private: Ui::MainWindow *ui; }; #endif // MAINWINDOW_H 

---

主窗口

 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QtWebEngineWidgets> #include <QUrl> #include <QtWebView/QtWebView> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); QFile apiFile(":/qtwebchannel/qwebchannel.js"); if(!apiFile.open(QIODevice::ReadOnly)) qDebug()<<"Couldn't load Qt's QWebChannel API!"; QString apiScript = QString::fromLatin1(apiFile.readAll()); apiFile.close(); view->page()->runJavaScript(apiScript); view->load(QUrl(QStringLiteral("qrc:/new/prefix1/index.html"))); connect(view->page(), SIGNAL(loadFinished(bool)), this, SLOT(connectToJs(bool, view))); setCentralWidget(view); } void MainWindow::connectToJs(bool result, QWebEngineView * view) { qDebug() << "connectToJs!" << result; if (result) { QWebChannel *channel = new QWebChannel(view->page()); view->page()->setWebChannel(channel); channel->registerObject(QString("nameObject"), this); } } MainWindow::~MainWindow() { delete ui; } 

---

index.html

 <html> <head> <title>Javascript Login Form Validation</title> <script src="login.js"></script> </head> <body> <div class="container"> <div class="main"> <h2>Javascript Login Form Validation</h2> <form id="form_id" method="post" name="myform"> <label>User Name :</label> <input type="text" name="username" id="username"/> <label>Password :</label> <input type="password" name="password" id="password"/> <input type="button" value="Login" id="submit" onclick="validate()"/> </form> </div> </div> </body> </html> 

---

login.js

 function validate(){ var username = document.getElementById("username").value; var password = document.getElementById("password").value; if ( username == "Jack" && password == "login"){ alert ("Login successfully"); } else{ alert("Error: the login is incorrect!"); } } var workoutObject; if (typeof qt != 'undefined') { alert("Qt is OK!!"); new QWebChannel(qt.webChannelTransport, function (channel) { workoutObject = channel.objects.nameObject; }); } else { alert("Qt is not defined!"); } 

我现在想要的是单击按钮时将用户名和密码从html传递到QT。
如何实现QWebChannel？

Answer 1

为了通过QWebEngine将args从HTML / JS传递到QT，您将必须使用QWebChannel 。 此任务有一些先决条件：

首先，您必须创建Qt对象才能与HTML / JS交互

H档

  class QJavaScriptProxy : public QObject
  {
     Q_OBJECT

     private:
            QString m_oUserName;
            QString m_oPassword;
     public:
        // Ctor
        QJavaScriptProxy(QObject * poParent = Q_NULLPTR);
        // Expose function to HTML/JS
        Q_INVOKABLE void setUserNameAndPassword(const QString & oUserName, const QString & oPass);
           ...
  };

Cpp文件

  QJavaScriptProxy::QJavaScriptProxy(QObject * poParent) : QObject(poParent)
  {
     // Set object name will be used as JS variable
     setObjectName("m_oQtProxy");
  }
  QJavaScriptProxy::setUserNameAndPassword(const QString & oUserName, const QString & oPassword)
  {
     //store user name and password
     m_oUserName = oUserName;
     m_oPassword = oPassword;
  }

然后在您的MainWindow中注册该对象

QWebChannel * poChannel = new QWebChannel(view->page());
view->page()->setWebChannel(poChannel);
// Create proxy object
m_poQtProxy = new QJavaScriptProxy(this);
// Register object
channel->registerObject(m_poQtProxy->objectName(), m_poQtProxy);

添加qwebchannel.js文件并将其链接到您的HTML资源

index.html

<script src="qwebchannel.js" type="text/javascript"></script>

在JavaScript方面

login.js

 new QWebChannel(qt.webChannelTransport, function(channel){
            // Set global Qt proxy object
            window.qProxy = channel.m_oQtProxy;             
        });


    // Pass user name and password to QT
    // Note: you can call this function on button click.
    function toQT(name, pass){
       qProxy.setUserNameAndPassword(name,pass);
    }