Qt调用JS

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量279 收藏 1
点赞数
文章标签： javascript ui c/c++ ViewUI
原文链接：http://www.cnblogs.com/zhangxuan/p/7576829.html
版权

 

转自：

一、 简介 
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里拖入控件，其布局按如下设置：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

这里写图片描述

在mainwindow.cpp中添加头文件#include <QtCore/QUrl>、#include<QtWebK
itWidgets/QWebView>、#include <QtWebKitWidgets/QWebFrame>、#include<QtW
ebkit/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”），其效果如下图：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

这里写图片描述

弹出对话框为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()) ; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

JsCallQt()的两个版本分别对应html中的两个按钮，推荐使用第二种方式。第一种带参数传递时，好像需要在javascript中将变量设置为数组，传递多个参数时好像会失效（有兴趣可以验证）。 
单击html中的按钮（“第二种方式传递到Qt”），其显示效果如下图： 
这里写图片描述

一、 简介 
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里拖入控件，其布局按如下设置：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

这里写图片描述

在mainwindow.cpp中添加头文件#include <QtCore/QUrl>、#include<QtWebK
itWidgets/QWebView>、#include <QtWebKitWidgets/QWebFrame>、#include<QtW
ebkit/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”），其效果如下图：
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

这里写图片描述

弹出对话框为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()) ; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

JsCallQt()的两个版本分别对应html中的两个按钮，推荐使用第二种方式。第一种带参数传递时，好像需要在javascript中将变量设置为数组，传递多个参数时好像会失效（有兴趣可以验证）。 
单击html中的按钮（“第二种方式传递到Qt”），其显示效果如下图： 
这里写图片描述

转载于:https://www.cnblogs.com/zhangxuan/p/7576829.html

weixin_30481087
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QT调用JS详细过程
03-07
详细介绍QT调用JS的过程，适用于网络爬虫中提取有效信息。
QT内嵌浏览器与JS通讯
weixin_41111116的博客
09-01 1940
QT内嵌浏览器与JS通讯
QT与JavaScript交互
guoqignrus的博客
08-02 3847
简介 本篇主要对QT与JavaScript的交互方法通过代码进行详细说明，实现的QT版本是 4.8.7, QT += webkit。完整代码中包含启动html调试窗口的方法。 QT中调用JS函数 // 调用js中的无参无返回值,名为QtCallNoParam的函数 ui->qwebView ->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()")); // 调用js中的有两个参数...
Qt与JS的数据交互
04-19
演示了使用 QWebChannel 在Qt(QWebEngineView/QWebEnginePage)与JS之间的数据交互。示例工程非常简单，使用QtCreator直接打开即可运行（需Qt5.6.2以上）。
Qt+JS调用
styyzxjq2009的专栏
12-22 2062
Qt调用函数时，用以下方法， QScriptEngine engine; engine.evaluate("function fullName() { return this.firstName + ' ' + this.lastName; }"); engine.evaluate("somePerson = { firstName: 'John', lastName: 'Doe
QtWebkit读取html元素
smaller
11-22 2491
闲着无聊做个小工具抓特定网站一些免费账号（不通用）。 主要用了Qt5.5.1种的webkit，具体看代码 就不说了，代码很简单（详细代码看附件吧）： void MainWindow::on_pushButton_clicked() { ui->pushButton->setEnabled(false); QString WwwUrl = "http://www.ishadow
QTWebkit中的webkit/qt/api文档
weixin_30920597的博客
03-05 147
QTWebkit中的webkit/qt/api文档 概述 该目录下的文件均以前前缀qweb开头，主要用于支持前端的实现。核心的类为：qwebview、qwebpage、qwebframe等三个类。这三者间的关系由图描述。（注：图来自QTWebkit自带文档） 图1 qwebview,qwebpage,qwebframe三者关系 View是一个逻辑视图，真正的工作分别由page和f...
qt中html和js交互,QT之QtWebKit与JavaScript交互（一）
weixin_42459078的博客
07-08 522
现在写这个题目晚了点， QtWebkit一度是个比较火的话题(当然目前仍然很火)， 这个formExtractor应该是在4.5的时候就存在于Qt的例子里了(QTDIR/examples/webkit/formextractor)， 只是仔细看过这个例子的人估计还比较少。 这里简单分析一下这个例子， 算是给做webkit开发的人提供个扫盲性质的指导。闲话少说， 先来看一个formExtractor...
QWebKit-QWebElement
davidsu33的专栏
10-12 3295
实现读取页面功能，用到
QT 与 网页的交互
wangwei890702的专栏
03-04 1292
旨在将我见到的记录下来： 通过qt查找页面中的元素： QWebElement e = this->page()->mainFrame()->findFirstElement("div[id=pause]");  rect = e.geometry(); 找到  id=pause 的div ，并获取其属性。 待续：
qt 调用javascript函数 带参数
05-27
在qt中调用javascript 已在linux中编译好 qt4.5
QT（C++）与Web的JS相互调用实用例子
11-03
此实用例子参考网上常用例子，经过自己改编及测试：实现了C++调用JS的方法，JS调用C++中的函数。
QT中使用QScriptEngine引擎编译运行JavaScript脚本
03-02
1.编译运行JavaScript脚本的例子。 2.包含了QScriptEngine的一些使用方法。
qt js 互相调用
11-25
qt js 实现方法互相调用
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 624
步骤很详细，直接上教程……
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 14
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 361
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 755
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
[email protected]使用懒加载
weixin_44072254的博客
04-25 199
【代码】[email protected]使用懒加载。
qt c++ 调用js接口传递参数
06-06
在 Qt 中调用 JavaScript 接口并传递参数，一般可以通过 QWebEngineView 组件实现。具体步骤如下： 1. 在 Qt 中创建一个 QWebEngineView 组件，并加载需要调用的 JavaScript 接口所在的网页。 ```cpp ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值