寫在前面
- Qt的一些基本用法可自行百度，也可以系統地學習一下QT學習之路，就喜歡這種江湖老師，無比感謝~
- 本文也參考了一些博客，加上我自己的理解之后整理得到。原理就不細講了，重點講用法。
- 本文也會涉及一點非常非常簡單的javasript語法，可以速成，參考w3school,有好的編程基礎的話，入門是可以秒殺的。
QT
順序有點亂
-
先新建一個工程，搭好一個UI（最簡陋的）
一個PushButton和一個webView
名字可自取，但為了方便演示，就采用默認的。Layout不會的話可以不用。
-
添加槽函數
單擊PushButton->轉到槽
會自動幫你申明函數和鏈接(connect)，你只需要在相應的函數體內添加內容即可,之后在講這個。
- 手動添加代碼
- 在
mainwindow.h中添加void slotPopulateJavaScriptWindowObject()
#include <QWebView>
#include <QtWebKit>
#include <QWebFrame>
#include <QMainWindow>
#include <QMessageBox>
#include <QString>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
void slotPopulateJavaScriptWindowObject();
void on_pushButton_clicked(); //自動生成
private:
Ui::MainWindow *ui;
};
- 具體實現，將以下代碼加入到
MainWindow.cpp中
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
setWindowTitle(tr("演示"));
QString strMapPath="file:///"; //exe文件所在的絕對路徑
strMapPath+=QCoreApplication::applicationDirPath();
strMapPath+="/yanshi.html";
QUrl url(strMapPath); //注意是絕對路徑
ui->webView->load(url); //打開本地的.html文件
//當然也可以把html放在任何地方，能保證計算機找得到就行
connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
this, SLOT(slotPopulateJavaScriptWindowObject())); //將Qt與js聯系起來
//收到mainFrame()發出的SIGNAL后，this調用slotPopulateJavaScriptWindowObject
//QT與JavaScript互調是通過QWebFrame的兩個函數來實現的:
//addToJavaScriptWindowObject()將QObject對象傳給JS，這樣JS就能調用QObject的public slots函數
//QT通過evaluateJavaScript()直接調用JS中的函數
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::slotPopulateJavaScriptWindowObject()
{
ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("ReinforcePC", this);
//addToJavaScriptWindowObject()將QObject對象傳給JS，這樣JS就能調用QObject的public slots函數
//addToJavaScriptWindowObject的第一個參數是對象在javascript里的名字， 可以自由命名， 第二個參數是對應的QObject實例指針。
}
void MainWindow::on_pushButton_clicked()
{
QWebFrame *webFrame = ui->webView->page()->mainFrame();
QString cmd = QString("showhello()");
webFrame->evaluateJavaScript(cmd); //QT通過evaluateJavaScript()直接調用JS中的函數
}
html
新建一個html文件，代碼如下：
<!DOCTYPE html>
<html>
<body>
<script>
function showhello()
{
alert("Welcome, newbird "); //這是一個很簡單的無參的函數
}
</script>
</body>
</html>
解釋及效果
- 代碼中的注釋大致已經講清楚了用法，再來系統的講一遍。
首先，JS調用QT中的函數，看這個：
connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
this, SLOT(slotPopulateJavaScriptWindowObject())); //將Qt與js聯系起來
其中，第一個參數ui->webView->page()->mainFrame()是信號的發送方，是QwebView里面的一個東東，它發出javaScriptWindowObjectCleared()信號，這個信號的具體形式你可以不管，就像pushbutton的click()信號，都是已經寫好的。第三個參數是this,一個指針。第四個參數是slotPopulateJavaScriptWindowObject()函數。這條語句的意思就是：在收到mainFrame()發出的SIGNAL后，this調用slotPopulateJavaScriptWindowObject實現相應的操作或者功能，而這個功能就是 將QObject對象傳給JS，這樣JS就能調用QObject的public slots函數,就如同使用自己的function一樣。
其次，QT調用JS中的函數：
QWebFrame *webFrame = ui->webView->page()->mainFrame();
QString cmd = QString("showhello()");
webFrame->evaluateJavaScript(cmd);
意思就是，一個QwebFrame指針可以通過evaluateJavaScript函數把命令傳遞過去，在以上的代碼中這個命令就是showhello()，這個就是js中的一個函數。仿佛是在直接調用qt中的函數。
- 效果
-
QT對JS的調用
運行之后如圖，因為網頁沒寫什么所以是空白的
單擊
pushbutton,會執行on_pushButton_clicked()函數，因為你在執行轉到槽的過程中，系統已經自動幫你connect好了，顯示如下
js的alert語句執行了
由此可見，好像是
pushbutton直接調用了JS中的showhello()函數。
-
JS對QT的調用
需要將代碼做如下修改
a. yanshi.html
<!DOCTYPE html>
<html>
<body>
<button onclick="showhello()">here</button>
<script>
function showhello()
{
//alert("Welcome, newbird ");
var string= "hello oldbird";
ReinforcePC.showinfo(string);//調用qt中的showinfo()函數
}
</script>
</body>
</html>
b. MainWindow.h
#include <QWebView>
#include <QtWebKit>
#include <QWebFrame>
#include <QMainWindow>
#include <QMessageBox>
#include <QString>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
void slotPopulateJavaScriptWindowObject();
void on_pushButton_clicked(); //自動生成
public slots:
void showinfo(QString string); //注意是在public slots中
private:
Ui::MainWindow *ui;
};
c. MainWindow.cpp
添加以下函數即可
void MainWindow::showinfo(QString string)
{
QMessageBox::information(this,tr("消息"),string); //彈出消息框
}
d. 效果
運行之后
點擊here之后
由此可見，好像是JS中的showhello()直接調用了QT中的showinfo()函數，實現這個的就是之前講的
connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
this, SLOT(slotPopulateJavaScriptWindowObject())); //將Qt與js聯系起來
總結
至此，你已經能夠讓Qt和javascript互相打電話啦，開心不。
哦，對了，還有一個傳參數的問題，qt給js傳參的話可以這樣寫，上面是沒有參數的。只能是字符串形式
QString cmd = QString("showtrace(\"%1\",\"%2\")").arg(lonJson).arg(latJson);
可能有不正確的地方，請諒解
碼字不易，轉載請注明地址
