QT QWebKit使用心得(Qwebkit与Html之间通信)

最近这段时间,正在用QWebkit开发一个Application store的项目。因为需要用到第三方的数据,但后台无法直接去获取,所以需要做一个底层的模块,去获取第三方数据,然后给网页调用,因此我们选取了以WebKit为引擎的QWebkit来开发我们的项目。

在开发中,获得了一些心得体会,写下来供大家参考。为了方便说明,我特意做了一个例子。


QT QWebKit使用心得(Qwebkit与Html之间通信)_第1张图片.













                                                                           (图1)

此例子中,左边显示网页,右边是控件部分。

用户在网页的Name和Password输入框输入内容后,点击"Submit"按钮,则右边的Name和Password框则会出现网页中的内容,这就是网页调用Qt模块。

而用户在右边输入分别输入Name和Password,点击"Call JS"后,输入的信息也会显示在左边的Name和Password栏。这就是Qt调用网页。

由此我们可以看出QWebKit,即可以Qt调用网页,也可以网页调用Qt。这样我们就可以做用Qt做一些网页做不了的事情。


接下来,将阐述如何实现Qt和网页互相调用。

首先,在“图1”所示的主界面中生成WebKit控件,可以自己new或者在Design中拖入。在本例中,采取的是拖入此控件。此控件对应的类是QWebView。它可以Load和显示页面。通过此控件我们来调用网页的方法和接受网页的调用。

本主界面的类是

.h的代码:

[cpp]  view plain copy print ?
  1. #ifndef QWEBKITTEST_H  
  2. #define QWEBKITTEST_H  
  3.   
  4. #include <QDialog>  
  5. #include <QString>  
  6. #include <QWidget>  
  7. #include <QWebView>  
  8. #include <QWebFrame>  
  9. #include <QTextEdit>  
  10. #include "mywebkit.h"  
  11.   
  12. namespace Ui {  
  13. class QWebKitTest;  
  14. }  
  15. class QWebKitTest : public QDialog  
  16. {  
  17.     Q_OBJECT  
  18.       
  19. public:  
  20.     explicit QWebKitTest(QWidget *parent = 0);  
  21.     ~QWebKitTest();  
  22.   
  23.     void setValueFromWeb(const QString &strName,const QString &strPwd);  
  24.   
  25. protected slots:  
  26.     void onBtnCallJSClicked();  
  27.     void populateJavaScriptWindowObject();  
  28.       
  29. private slots:  
  30.     void on_pushButton_clicked();  
  31.   
  32. private:  
  33.     Ui::QWebKitTest *ui;  
  34.     //MyWebKit* m_webObj;  
  35.     class MyWebKit* m_webObj;  
  36. };  
  37.   
  38. #endif // QWEBKITTEST_H  

具体cpp代码为:

[cpp]  view plain copy print ?
  1. #include "qwebkittest.h"  
  2. #include "ui_qwebkittest.h"  
  3.   
  4. QWebKitTest::QWebKitTest(QWidget *parent) :  
  5.     QDialog(parent)  
  6. {  
  7.     m_webObj = new MyWebKit(this);  
  8.     ui->setupUi(this);  
  9.     ui->webView->setUrl((QUrl("qrc:/test.html")));  
  10.     connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(populateJavaScriptWindowObject()));  
  11.   
  12. }  
  13.   
  14. QWebKitTest::~QWebKitTest()  
  15. {  
  16.     delete ui;  
  17. }  
  18.   
  19. void QWebKitTest::setValueFromWeb(const QString &strName, const QString &strPwd)  
  20. {  
  21.     ui->textEdit->setText(strName);  
  22.     ui->textEdit_2->setText(strPwd);  
  23. }  
  24.   
  25. void QWebKitTest::onBtnCallJSClicked()  
  26. {  
  27.     QString strVal = QString("callfromqt(\"%1\",\"%2\");").arg(ui->textEdit->toPlainText()).arg(ui->textEdit_2->toPlainText() );  
  28.     ui->webView->page()->mainFrame()->evaluateJavaScript(strVal);  
  29. }  
  30.   
  31. void QWebKitTest::populateJavaScriptWindowObject()  
  32. {  
  33.     qDebug()<<"populateJavaScriptWindowObject";  
  34.     ui->webView->page()->mainFrame()->addToJavaScriptWindowObject(QString("mywebkit"),m_webObj);  
  35. }  
  36.   
  37. void QWebKitTest::on_pushButton_clicked()  
  38. {  
  39.     onBtnCallJSClicked();  
  40. }  

Qt使用的是向网页注册一个QObject对象,通过这个对象,网页可以通过这个调用这个对象的方法来实现调用底层的逻辑。

以下是本例中的注册对象的声明,

[h]  view plain copy
  1. class MyWebKit : public QObject  
  2. {  
  3.     Q_OBJECT  
  4.   
  5. public:  
  6.     MyWebKit(QObject *parent=0);  
  7.     ~MyWebKit();  
  8.   
  9. public slots:  
  10.   
  11.     void onCall(QString strName,QString strPwd);  
  12.      
  13. private:  
  14.       
  15. };

cpp

#include "MyWebKit.h"
#include "<span style="color: rgb(128, 128, 128); font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">qwebkittest</span>.h"

MyWebKit::MyWebKit(QObject *parent):
    QObject(parent)
{
    ;
}

MyWebKit::~MyWebKit()
{
    ;
}

void MyWebKit::<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">onCall</span>(QString strBussid,QString strType,QString strIndex,QString strName,QString strValue)
{
    <span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">QWebKitTest </span>* pMain = (<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">QWebKitTest</span>*)parent();
    pMain->setValueFromWeb(strBussid,strType);
}

html部分代码

[html]  view plain copy
  1. <html>  
  2.   <head>  
  3.     <title>Login page</title>  
  4.       
  5.       <script language="javascript" >  
  6.       function calltoqt()  
  7.       {  
  8.         var nameArray;  
  9.         nameArray = document.getElementsByName("username");  
  10.         var pwdArray;  
  11.         pwdArray = document.getElementsByName("userpwd");  
  12.         window.mywebkit.onCall(nameArray[0].value,pwdArray[0].value);  
  13.          
  14.       }  
  15.   
  16.       function callfromqt(name,pwd)  
  17.       {  
  18.           var nameArray;  
  19.           nameArray = document.getElementsByName("username");  
  20.           var pwdArray;  
  21.           pwdArray = document.getElementsByName("userpwd");  
  22.           nameArray[0].value = name;  
  23.           pwdArray[0].value = pwd;  
  24.       }  
  25.        
  26.     </script>  
  27.       
  28.   </head>  
  29.   <body>  
  30.       <p align="center">Name:  
  31.       <input type="text" name="username" />  
  32.       </p>  
  33.       
  34.       <p align="center">Password:  
  35.       <input type="text" name="userpwd"  />  
  36.       </p>  
  37.       <p align="center" >  
  38.       <input type="button" value="Submit" onclick="calltoqt()" />  
  39.       </p>  
  40.   </body>  
  41. </html>  

当然,evaluateJavaScript的参数不一定只是javascript方法,同样一段javascript代码也是可以的。比如以上功能也可以这样调用

[cpp]  view plain copy
  1. ui.webView->page()->mainFrame()->evaluateJavaScript(" var nameArray; \  
  2.            nameArray = document.getElementsByName(\"username\"); \  
  3.            var pwdArray; \  
  4.            pwdArray = document.getElementsByName(\"userpwd\"); \  
  5.            nameArray[0].value = \"andrei\"; \  
  6.            pwdArray[0].value = \"123456\";" );  

你可能感兴趣的:(QT QWebKit使用心得(Qwebkit与Html之间通信))