將數據從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);
    }

將數據從html傳遞到QT

問題描述

1 個解決方案

解決方案1
2 2017-10-24 11:30:03

將數據從html傳遞到QT

問題描述

1 個解決方案

解決方案1 2 2017-10-24 11:30:03

解決方案1
2 2017-10-24 11:30:03