Qt与JS相互调用
来源:互联网 发布:伦佐皮亚诺 知乎 编辑:程序博客网 时间:2024/06/03 07:11
一、 简介
Qt提供了本地C++对象与JavaScript的无缝集成,可以进行本地与web混合应用开发。利用Qt的Webkit集成与QtNetwork模块,可以自由的混合JavaScript、样式表、Web内容和Qt组件。对于C++和javaScript通信,最基本也最复杂的做法是使用COM,本文主要介绍使用Qt提供的QWebView和javaScript进行通信。
二、 流程
基本函数介绍
Qt与JavaScript互调是通过QWebFrame两个函数来实现的:addToJavaScriptWindowObject()将QObject对象传给JS,这样JS就能调用QObject的共有槽函数。Qt通过evaluateJavaScript()直接调用JS中德函数。其流程如下图:
函数说明1. void QWebFrame::addToJavaScriptWindowObject(const QString& name, QObject * object)第一个参数:name为对象在javaScript里的名字,可以自由命名。第二个参数:object对应的QObject实例指针。要在JS调用该QObject之前调用这个函数,建议将这个函数放到一个signal的槽函数中调用,其使用代码代码如下:connect(ui.webView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()),this, SLOT(populateJavaScriptWindowObject()));相应的槽函数为:void 类名::populateJavaScriptWindowObject(){ui.webView->page()->mainFrame()->addToJavaScriptWindowObject(“formExtractor”, this);}2. QVariant QWebFrame::evaluateJavaScript(const QString &scriptSource)建立一个工程,拖入一个QWebView,载入html网页,添加一个按钮调用javaScript,其代码为:Ui.webView->page()->mainframe()->evaluateJavaScript(“Test()”) ;其中Test()为javaScript中的Test()函数。附注:如果Qt调用js函数,js函数带有参数,在Qt里该函数调用方法要写成如下形式:QString method = QString(“JSFunction(\”%1\” , \”%2\”)”).arg(param1).arg(param2) ;Ui.webView->page()->mainframe()->evaluateJavaScript(method) ;三、 工程示例新建Qt GUI工程项目QtJS,类名为mainWindow,继承基类选择为QMainWindow。往ui里拖入控件,其布局按如下设置:
在mainwindow.cpp中添加头文件#include <QtCore/QUrl>、#include<QtWebKitWidgets/QWebView>、#include <QtWebKitWidgets/QWebFrame>、#include<QtWebkit/QWebElement>。在mainwindow.h头文件中添加公有槽函数 void populateJavaScriptWindowObject() ;//为了保证每次打开新网页或刷新网页时都调用,将该槽函数和javaScriptWindowObjectCleared()信号相连 void pop1() ; //不传递参数到JavaScript void pop2() ;//将Qt中的值传递到JavaScript void JsCallQt() ;//JavaScript调用Qt,不传递参数 void JsCallQt(QStringList str) ;//JavaScript调用Qt,传递参数在构造函数中建立信号和槽的连接connect(ui.pushButton , SIGNAL(clicked()) , this , SLOT(pop1())) ; connect(ui.pushButton_2 , SIGNAL(clicked()) , this , SLOT(pop2())) ; connect(ui.webView->page()->mainFrame() , SIGNAL(javaScriptWindow-ObjectCleared()) , this , SLOT(populateJavaScriptWindowObject())) ;分别添加槽函数的定义:void mainWindow::populateJavaScriptWindowObject(){ ui.webView->page()->mainFrame()->addToJavaScriptWindowObject("A" , this) ;}单击按钮(“不带参数传递到JS”),其效果如下图:
弹出对话框为html中的一个警告,其代码如下:
在文本框中输入X、Y的值,单击按钮(“带参数传递到JS”),其效果
通过JavaScript调用Qt主要有两种方式,第一种:在Qt中定义一个公有的槽函数;第二种:在公有成员函数前添加Q_INVOKABLE宏。
添加JsCallQt()的定义如下:
void mainWindow::JsCallQt(QStringList str){ ui.lineEdit_3->setText(str[0]) ; ui.lineEdit_4->setText(str[1]) ;}void mainWindow::JsCallQt(){ QWebFrame *frame = ui.webView->page()->mainFrame(); QWebElement X = frame->findFirstElement("#X"); ui.lineEdit_3->setText(X.evaluateJavaScript("this.value").toString()) ; QWebElement Y = frame->findFirstElement("#Y"); ui.lineEdit_4->setText(Y.evaluateJavaScript("this.value").toString()) ;}
JsCallQt()的两个版本分别对应html中的两个按钮,推荐使用第二种方式。第一种带参数传递时,好像需要在javascript中将变量设置为数组,传递多个参数时好像会失效(有兴趣可以验证)。
单击html中的按钮(“第二种方式传递到Qt”),其显示效果如下图:
0 0
- Qt与JS相互调用
- Silverlight与JS相互调用
- PHP与JS相互调用
- JS与Flash相互调用
- androidwebview与js相互调用
- FlexPaper与js相互调用
- Flex与JS相互调用
- CefSharp 与 js 相互调用
- js与android相互调用
- WKWebView 与 JS 相互调用
- js与applet的相互调用
- Flex与JS(Javascript)相互调用
- Android 里js 与java相互调用
- Silverlight如何与JS相互调用
- C#与js的相互调用
- Silverlight如何与JS相互调用
- Objective-c与js相互调用
- AS与JS的相互调用
- eclipse启动找不到javaw.exe
- Activity与Service通信
- 贪心算法——n个数连接得到最小或最大的多位整数
- Unity 协程使用指南
- BZOJ1433: [ZJOI2009]假期的宿舍
- Qt与JS相互调用
- 【NCRE】-MongoDB宏观总结
- 《剑指offer》——合并两个排序的链表
- 36项修炼:解决问题—个案突破和障碍排除
- urllib & urllib2
- linux虚拟机初步 vmware的简单操作【鸟哥的私房菜第五章】
- 装饰模式
- 蓝桥杯 算法训练 2的次幂表示
- Android应用架构概述