QT与JavaScript交互/Qt调用JS脚本
简介
本篇主要对QT与JavaScript的交互方法通过代码进行详细说明，实现的QT版本是 4.8.7,
QT += webkit。完整代码中包含启动html调试窗口的方法。
QT中调用JS函数
// 调用js中的无参无返回值,名为QtCallNoParam的函数
ui->qwebView ->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()"));
// 调用js中的有两个参数无返回值，名为QtCallWithParam的函数
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithParam(123,\"QT String Param.\")"));
// 调用js中的无参有返回值，名为QtCallWithReturn的函数（返回值通过QVeariant接收）
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithReturn()"));
JS中调用QT函数
// JS调用QT对象的成员函数，要分为两步。
// 1 通过addToJavaScriptWindowObject将QT的对象暴露给js.在js中通过QTWindow调用QT的方法
ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("QTWindow",this);
// 2 在JS中调用的QT槽函数，属性必须是public slots 公有槽函数。
class ...
{
...
public slots:
// 设置QT对象暴露给JS的槽函数
void addMainWindowToHtml();
// 在js中调用的无参成员函数
void JsCallNoParam();
// 在js中调用的有参成员函数
void JsCallWithParam(int num,QString str);
// 在js中调用的有返回值的成员函数
QString JsCallWithReturn();
...
};
注意：在将qt对象暴露给js时，要在js中执行qt对象之前暴露，否则js不认识qt的对象名称.所以通常通过链接QWedView的信号 javaScriptWindowObjectCleared，在槽中进行暴露。
完整代码
mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QTimer>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow {
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
public slots:
// 设置QT对象暴露给JS的槽函数
void addMainWindowToHtml();
// 在js中调用的无参成员函数
void JsCallNoParam();
// 在js中调用的有参成员函数
void JsCallWithParam(int num,QString str);
// 在js中调用的有返回值的成员函数
QString JsCallWithReturn();
private slots:
// html文件加载完成槽函数
void onPageLoadFinished(bool);
// QT调用js中的函数（无参、有参、有返回值的按钮槽函数）
void on_btn_noparam_clicked();
void on_btn_withparam_clicked();
void on_btn_withreturn_clicked();
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QMouseEvent>
#include <QtWebKit/QWebView>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebFrame>
#include <QWebInspector>
#include <QWebSettings>
#include <QVariantList>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow){
ui->setupUi(this);
// 加载资源中的 html
// ui->webView->load(QUrl("qrc:/html.html"));
// 加载本地html方式
ui->webView->load(QUrl::fromLocalFile("/home/guoqr/html.html"));
//页面加载完成的信号
connect(ui->webView, SIGNAL(loadFinished(bool)), this, SLOT(onPageLoadFinished(bool)));
//将QT窗口暴露给html（ 通过信号槽函数执行进行暴露设置，在js中可以通过暴露的对象 对qt中的成员函数调用 ）
connect(ui->webView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()),this,SLOT(addMainWindowToHtml()));
//html调试窗口（可以显示js中打印的日志和显示js代码）
QWebSettings *settings = ui->webView->settings();
settings->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
QWebInspector *inspector = new QWebInspector(this);
inspector->setWindowFlags(Qt::WindowStaysOnTopHint | Qt::Dialog);
inspector->setMinimumSize(300, 110);
inspector->setPage(ui->webView->page());
inspector->show();
}
MainWindow::~MainWindow(){
delete ui;
}
//页面加载完成
void MainWindow::onPageLoadFinished(bool){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<ui->webView->url().toString();
}
/// JS调用QT中的方法
/// 首先要通过 WebView 成员对象信号 javaScriptWindowObjectCleared链接槽函数addMainWindowToHtml
/// 在槽函数中，传入的第一个参数“QTWindow”是在JS中暴露的QT对象名称。第二个参数是第一个参数要表示的哪一个对象指针（对象是QObject子类）。
/// 在JS中调用的QT对象的函数必须是public并且是槽函数，经过slots声明的。
//暴露QT主窗口到html
void MainWindow::addMainWindowToHtml(){
ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("QTWindow",this);
}
//暴露给js的无参函数
void MainWindow::JsCallNoParam(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
}
//暴露给js的有参函数
void MainWindow::JsCallWithParam(int num,QString str){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<num<<str;
}
//暴露给js有返回值的函数
QString MainWindow::JsCallWithReturn(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
return QString("This is a string from Qt window.");
}
/// 调用JS中的方法(讲JS中的方法名称 和要传递的参数 以字符串的方式设置到evaluateJavaScript中)
/// 如果JS中的方法有返回值，用QVariant接收.
//无参调用JS
void MainWindow::on_btn_noparam_clicked(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()"));
}
//有参调用JS
void MainWindow::on_btn_withparam_clicked(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithParam(123,\"QT String Param.\")"));
}
//JS有返回值的情况
void MainWindow::on_btn_withreturn_clicked(){
QVariant ret = ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithReturn()"));
qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<" RET:"<<ret;
}
html.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
input{
width: 100%;
height: 33.34%;
}
</style>
</head>
<body>
<input type="BUTTON" value="无参调用QT" onclick="JsNoParam()"></input>
<input type="BUTTON" value="有参调用QT" onclick="JsWithParam()"></input>
<input type="BUTTON" value="QT有返回值" onclick="JsWithReturn()"></input>
</body>
<script type="text/javascript">
function JsNoParam() {
console.log("JsNoParam");
QTWindow.JsCallNoParam();
}
function JsWithParam() {
console.log("JsWithParam");
QTWindow.JsCallWithParam(2333,"JS String Param.");
}
function JsWithReturn() {
var ret = QTWindow.JsCallWithReturn();
console.log("JsWithReturn RET:" + ret);
}
function QtCallNoParam() {
console.log("QtCallNoParam");
}
function QtCallWithParam(num,str) {
console.log("QtCallWithParam param:" + num + " " + str);
}
function QtCallWithReturn() {
console.log("QtCallWithReturn");
return "This is a String from JS.";
}
</script>
</html>
Qt调用JS脚本
原文链接：https://blog.csdn.net/GraceLand525/article/details/64906354
程序通过调用js脚本的函数执行计算（将计算公式写入js脚本，在程序中通过传参数调用js脚本中的函数进行计算，最后将计算结果返回，显示到界面）
//DoJS.pro
#-------------------------------------------------
#
# Project created by QtCreator 2017-03-22T10:16:33
#
#-------------------------------------------------
QT += core gui script
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
TARGET = DoJS
TEMPLATE = app
SOURCES += main.cpp\
widget.cpp
HEADERS += widget.h
FORMS += widget.ui
DISTFILES += \
TransCal.js
RESOURCES += \
dojs.qrc
widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
namespace Ui {
class Widget;
}
class Widget : public QWidget
{
Q_OBJECT
public:
explicit Widget(QWidget *parent = 0);
~Widget();
void readJS();
private slots:
void on_btn_cal_clicked();
private:
Ui::Widget *ui;
};
#endif // WIDGET_H
widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QFile>
#include <QTextStream>
#include <QScriptEngine>
#include <QScriptValue>
#include <QScriptValueList>
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
ui->lineEdit_var1->setText("12");
ui->lineEdit_var2->setText("0.5");
}
Widget::~Widget()
{
delete ui;
}
void Widget::readJS()
{
QString result = "";
QFile scriptFile(":/TransCal.js");
if (!scriptFile.open(QIODevice::ReadOnly))
{
result.clear();
qWarning() << "encodePass.js open failed";
return;
}
QTextStream out(&scriptFile);
QString contents = out.readAll();
scriptFile.close();
double var1 = ui->lineEdit_var1->text().toDouble();
double var2 = ui->lineEdit_var2->text().toDouble();
qDebug() << "var1:" << var1 << "var2:" << var2;
QScriptValueList args; //调用js方法时传入的参数
args << QScriptValue(var1) << QScriptValue(var2);
QScriptEngine engine;
QScriptValue js = engine.evaluate(contents); //个人理解：加载js文本到操作引擎
QScriptValue func;
func = engine.globalObject().property("trans2wCal"); //调用js方法
result = func.call(QScriptValue(), args).toString();
qDebug() << "result:" << result;
ui->lineEdit_sub->setText(result);
func = engine.globalObject().property("trans3wCal"); //调用js方法
result = func.call(QScriptValue(), args).toString();
qDebug() << "result:" << result;
ui->lineEdit_mul->setText(result);
}
void Widget::on_btn_cal_clicked()
{
readJS();
}
TransCal.js
//trans.js
function trans2wCal(var1,var2)
{
return var1+var2;
}
function trans3wCal(var1,var2)
{
return var1*var2+5;
}
资源文件:dojs.qrc
界面:widget.ui
参考资料：
1.跨平台编程的利器—Qt：与Javascript的交互（为程序添加动态脚本）
2.Qt之QtScript（一）
4.QT脚本学习笔记
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
