QT与JavaScript交互/Qt调用JS脚本
简介QT中调用JS函数JS中调用QT函数完整代码mainwindow.hmainwindow.cpphtml.htmlQt调用JS脚本widget.hwidget.cppTransCal.js资源文件:dojs.qrc界面:widget.ui参考资料:跨平台编程的利器—Qt:与Javascript的交互(为程序添加动态脚本)/qq_31073871/article/details/117221539?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ELandingCtr%7EHighlightScore-2.queryctrv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ELandingCtr%7EHighlightScore-2.queryctrv2&utm_relevant_index=5
简介
本篇主要对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_OBJECTpublic: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主窗口到htmlvoid 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接收.//无参调用JSvoid MainWindow::on_btn_noparam_clicked(){qDebug()<<__PRETTY_FUNCTION__<<__LINE__;ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()"));}//有参调用JSvoid 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="/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脚本
原文链接:/GraceLand525/article/details/64906354
程序通过调用js脚本的函数执行计算(将计算公式写入js脚本,在程序中通过传参数调用js脚本中的函数进行计算,最后将计算结果返回,显示到界面)
//DoJS.pro
#-------------------------------------------------## Project created by QtCreator -03-22T10:16:33##-------------------------------------------------QT += core gui scriptgreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsTARGET = DoJSTEMPLATE = appSOURCES += main.cpp\widget.cppHEADERS += widget.hFORMS += widget.uiDISTFILES += \TransCal.jsRESOURCES += \dojs.qrc
widget.h
#ifndef WIDGET_H#define WIDGET_H#include <QWidget>namespace Ui {class Widget;}class Widget : public QWidget{Q_OBJECTpublic: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.jsfunction trans2wCal(var1,var2){return var1+var2;}function trans3wCal(var1,var2){return var1*var2+5;}
资源文件:dojs.qrc
界面:widget.ui
参考资料:
1.跨平台编程的利器—Qt:与Javascript的交互(为程序添加动态脚本)
2.Qt之QtScript(一)
3.Qt的Script、Quick、QML的关系与总结
4.QT脚本学习笔记
5.JavaScript函数及其参数数组简介
6.js中数学函数的使用
7.JS数学函数的调用
跨平台编程的利器—Qt:与Javascript的交互(为程序添加动态脚本)
/guxch/article/details/7656846