Qt之QtWebKit(二)

继续学习QtWebkit.今天做个登录的例子让Qt对象和Javascript通信。其实就是将C++对象注册为一个javascript对象到html。然后调用C++函数。

 

[cpp]  view plain copy
  1. //loginform.h  
  2. #ifndef LOGINFORM_H  
  3. #define LOGINFORM_H  
  4. #include <QWidget>  
  5. namespace Ui {  
  6.     class LoginForm;  
  7. }  
  8. class LoginForm : public QWidget  
  9. {  
  10.     Q_OBJECT  
  11. public:  
  12.     explicit LoginForm(QWidget *parent = 0);  
  13.     ~LoginForm();  
  14. private:  
  15.     Ui::LoginForm *ui;  
  16. public slots:  
  17.     void javaScriptWindowObjectCleared();  
  18.     void login();  
  19. };  
  20. #endif // LOGINFORM_H  

 

[cpp]  view plain copy
  1. //loginform.cpp  
  2. #include "loginform.h"  
  3. #include "ui_loginform.h"  
  4. #include <QtGui>  
  5. #include <QtWebKit/QWebFrame>  
  6. #include <QtWebKit/QWebElement>  
  7. LoginForm::LoginForm(QWidget *parent) :  
  8.     QWidget(parent),  
  9.     ui(new Ui::LoginForm)  
  10. {  
  11.     ui->setupUi(this);  
  12.     ui->webView->setUrl(QUrl("qrc:/loginForm.html"));  
  13.     connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(javaScriptWindowObjectCleared()));  
  14.     resize(200,300);  
  15. }  
  16. LoginForm::~LoginForm()  
  17. {  
  18.     delete ui;  
  19. }  
  20. void LoginForm::javaScriptWindowObjectCleared()  
  21. {  
  22.     ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("loginForm"this);  
  23. }  
  24. void LoginForm::login()  
  25. {  
  26.     QWebFrame *frame = ui->webView->page()->mainFrame();  
  27.     QWebElement userNameEle = frame->findFirstElement("#userName");  
  28.     QWebElement passwordEle = frame->findFirstElement("#password");  
  29.     QString userName = userNameEle.evaluateJavaScript("this.value").toString();  
  30.     QString password = passwordEle.evaluateJavaScript("this.value").toString();  
  31.     QMessageBox *loginMsgBox = new QMessageBox(this);  
  32.     loginMsgBox->setIcon(QMessageBox::Information);  
  33.     loginMsgBox->setWindowTitle(tr("登录信息"));  
  34.     if(userName == password) {  
  35.         loginMsgBox->setText(tr("你的用户名为: %1,密码为: %2").arg(userName).arg(password));  
  36.     }else {  
  37.         loginMsgBox->setText(tr("用户名或密码错误"));  
  38.     }  
  39.     loginMsgBox->setDefaultButton(QMessageBox::Ok);  
  40.     loginMsgBox->exec();  
  41. }  

 

 

[cpp]  view plain copy
  1. //mainwindow.h  
  2. #ifndef MAINWINDOW_H  
  3. #define MAINWINDOW_H  
  4. #include <QtGui/QMainWindow>  
  5. class MainWindow : public QMainWindow  
  6. {  
  7.     Q_OBJECT  
  8. public:  
  9.     MainWindow(QWidget *parent = 0);  
  10.     ~MainWindow();  
  11. };  
  12. #endif // MAINWINDOW_H  

 

[cpp]  view plain copy
  1. //mainwindow.cpp  
  2. #include "mainwindow.h"  
  3. #include "loginform.h"  
  4. MainWindow::MainWindow(QWidget *parent)  
  5.     : QMainWindow(parent)  
  6. {  
  7.     this->setWindowTitle(tr("登录"));  
  8.     LoginForm *loginForm = new LoginForm(this);  
  9.     this->setCentralWidget(loginForm);  
  10.     this->setUnifiedTitleAndToolBarOnMac(true);  
  11.     this->setFixedSize(300,200);  
  12. }  
  13. MainWindow::~MainWindow()  
  14. {  
  15. }  

 


[javascript]  view plain copy
  1. //loginForm.html  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6. <title>登录</title>  
  7. <link rel="stylesheet" href="qrc:/loginForm.css" mce_href="qrc://writeblog.csdn.net/loginForm.css" type="text/css"/>  
  8. <mce:script type="text/javascript" src="qrc:/loginForm.js" mce_src="qrc://writeblog.csdn.net/loginForm.js"></mce:script>  
  9. </head>  
  10. <body>  
  11.     <table>  
  12.         <tr>  
  13.             <td>帐号:<td>  
  14.             <td><input type="text" name="userName" value="" id="userName"> <td>  
  15.         <tr>  
  16.         <tr>  
  17.             <td>密码:<td>  
  18.             <td><input type="password" name="password" id="password"> <td>  
  19.         <tr>  
  20.         <tr>  
  21.             <td> <input id="btn_login"  type="button" onclick="login();" value="登录" /><td>  
  22.             <td><a title="忘记密码" href=""  >忘记了密码?</a> <td>  
  23.         <tr>  
  24. </body>  
  25. </html>   

 

[javascript]  view plain copy
  1. //loginForm.js  
  2. function login() {  
  3.     var userName = document.getElementById("userName").value;  
  4.     var password = document.getElementById("password").value;  
  5.     if(userName == "") {  
  6.         alert("用户名不能为空");  
  7.     } else if (password == "") {  
  8.         alert("密码不能为空");  
  9.     } else {  
  10.         loginForm.login();  
  11.     }  
  12. }  

 

[css]  view plain copy
  1. //loginForm.css  
  2. * {  
  3.         margin:0;  
  4.         padding:0;  
  5. }  
  6. body {  
  7.     backgroundurl("qrc:/images/bodybg.gif"repeat-x scroll left top #FFFFFF;  
  8.     font-familyArial,Tahoma,Georgia,Verdana,Simsun,Helvetica,"Microsoft YaHei",Mingliu;  
  9.     font-size14px;  
  10.     line-height22px;  
  11. }  
  12. #btn_login {  
  13.     backgroundurl("qrc:/images/btn.png"repeat-x scroll left top #FFFFFF;  
  14. }   

 

Qt之QtWebKit(二)_第1张图片

 

 

Qt之QtWebKit(二)_第2张图片

你可能感兴趣的:(Qt之QtWebKit(二))