qt 嵌入web页面_Qt嵌入浏览器(二)——QWebChannel实现与页面的通信
本篇简介
本篇的小目标:
借助QWebChannel,实现浏览器与页面的通信交互
上一节中我们实现了浏览器的基本功能和一个简易的调试界面。>>点这里回顾上节内容
本节将尝试在此基础上实现浏览器与所加载页面的相互通信。既然是相互通信,自然包含两个方向:
页面向浏览器发送消息
浏览器向页面发送消息
页面向浏览器发送消息
为了实现页面向浏览器发送消息,需要在一定程度上实现在页面中访问Qt对象。Qt官方的推荐方式是使用QWebChannel。借助官方提供的qwebchannel.js脚本,可以很方便地实现页面对Qt对象的调用,同时便于实现C++和html/js的解耦,方便使用不同技术栈的开发人员的分工。
注:qwebchannel.js在Qt发布版的文件夹下可以找到。
Qt这边,为了方便后续开发,我们先设计一个JsContext类,声明如下:
class JsContext : public QObject
{
Q_OBJECT
public:
explicit JsContext(QObject *parent = nullptr);
signals:
void recvdMsg(const QString& msg);
public:
// 向页面发送消息
void sendMsg(QWebEnginePage* page, const QString& msg);
public slots:
// 接收到页面发送来的消息
void onMsg(const QString& msg);
};
这里需要注意的是,onMsg这个方法是提供给js直接调用的方法,按照Qt官方的说明,这个方法必须被声明为一个slot。onMsg方法的具体实现如下:
void JsContext::onMsg(const QString &msg)
{
emit recvdMsg(msg);
}
也就是发送了一个“已接收到消息”的信号,供感兴趣的其他组件接收。简便起见,我们直接把接收这个信号的部分实现到上一节中实现好的主界面初始化方法中——在接收到页面发送的消息后,把接收到的消息显示在状态栏里,实现如下:
m_jsContext = new JsContext(this);
m_webChannel = new QWebChannel(this);
m_webChannel->registerObject("context", m_jsContext);
m_webView->page()->setWebChannel(m_webChannel);
connect(m_jsContext, &JsContext::recvdMsg, this, [this](const QString& msg) {
ui->statusBar->showMessage(QString("Received message:%1").arg(msg), 3000);
});
上面的实现里包含了QWebChannel的使用步骤:
创建QWebChannel对象;
向QWebChannel对象注册Qt对象。 例子里的Qt对象就是上面实现的JsContext对象。
注意:这里注册时所用的名字“context”,就是js获取qt对象时所使用的索引名。
将设置好的QWebChannel对象设置为当前页面的通道。即调用QWebEnginePage的setWebChannel方法。
注意:如果没有正确注册webchannel,在js调用qt对象时会出现qt对象为undefined的情况。
接下来我们来看看页面这边要如何实现对应的接口。首先实现一个简单的js工具包msgutils.js:
var context;
// 初始化
function init()
{
if (typeof qt != 'undefined')
{
new QWebChannel(qt.webChannelTransport, function(channel)
{
context = channel.objects.context;
}
);
}
else
{
alert("qt对象获取失败!");
}
}
// 向qt发送消息
function sendMessage(msg)
{
if(typeof context == 'undefined')
{
alert("context对象获取失败!");
}
else
{
context.onMsg(msg);
}
}
// 控件控制函数
function onBtnSendMsg()
{
var cmd = document.getElementById("待发送消息").value;
sendMessage(cmd);
}
init();
这里有几点需要注意的地方:
初始化时创建了一个QWebChannel对象,里面的第一个参数qt.webChannelTransport,只有Qt端正确地向页面设置了webchannel才能取到,否则会是undefined。
QWebChannel对象里的channel.objects对应了上面Qt实现里向webchannel注册的对象表,channel.objects.context即为从表中取出名为"context"的对象。
context.onMsg即为对context对象所提供的onMsg方法的调用。如果该对象没有提供这个方法,或者这个方法没有被声明为一个slot,则Qt端会报找不到方法的错。
以这个脚本为基础,实现一个简单的交互页面:
webchannel测试
webchannel test
如此,页面向浏览器发送消息的通道就实现完成了。
浏览器向页面发送消息
这个方向相对比较简单。QWebEnginePage提供了执行JS的方法runJavaScript,因此只需要在页面上提供一个接收消息的JS接口,就能实现浏览器向页面的消息发送。
首先Qt端,上面的JsContext类已经声明了发送消息的方法sendMsg,其具体实现如下:
void JsContext::sendMsg(QWebEnginePage* page, const QString& msg)
{
page->runJavaScript(QString("recvMessage('%1');").arg(msg));
}
然后在msgutils.js里添加上对应的js接口recvMessage:
// 接收qt发送的消息
function recvMessage(msg)
{
alert("接收到Qt发送的消息:" + msg);
}
最后,我们在浏览器的主界面上加上一个输入框(msgEdit)和一个按钮(btnSend),并实现发送消息的槽:
connect(ui->btnSend, &QPushButton::clicked, this, [this]() {
QString msg = ui->msgEdit->text();
if (!msg.isEmpty())
{
m_jsContext->sendMsg(m_webView->page(), msg);
}
});
这样,浏览器向页面发送消息的接口就也实现完成了。
来试试效果,如下图:
页面向浏览器发送消息.png
浏览器向页面发送消息.png
有关旧版本的坑
如开篇简介中所说,这里的范例是基于Qt5.10版本实现的。如果使用Qt5.7.1之前的版本,在使用WebChannel时,会有一个严重的bug:在刷新页面后,页面会丢失window.qt对象
对于基于WebChannel的页面与浏览器间的通信实现就先介绍到这里。下一节会就使用Qt WebEngine实现https双向认证进行简要的分析。
参考链接
qt 嵌入web页面_Qt嵌入浏览器(二)——QWebChannel实现与页面的通信相关推荐
- qt 嵌入web页面_Qt嵌入浏览器(三)——QWebEngine与Https
本篇简介: 本篇的小目标: 挑战通过Qt WebEngine实现与服务端的Https双向认证 双向认证,Qt WebEngine和Chromium 这里先说结论:挑战失败了.至少使用Qt WebEng ...
- qt cef嵌入web(二)
在qt cef嵌入web文章中已经讲述了怎么把cef页面嵌入到qt程序中,但是这样并不完美,因为如果需要在多个窗口上创建cef浏览器部件的话,在 消息监听部分没有办法做区分多个浏览器事件,在这篇文章中 ...
- 浏览器从输入URL到页面渲染过程 —— 浏览器的进程与线程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程 系列文章: (二):浏览器从输入URL到页面渲染过程 --页 ...
- js,jquery获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- Qt中嵌入web网页的几种实现方式
1.背景 Web网页的界面交互相比较Qt客户端而言有着比较大的优势:更加的多样化和更高的使用便捷性使得我们即使在客户端中也可以考虑将web网页嵌入到客户端的界面当中.如此便能将web的优势和客户端进行 ...
- 【小沐学C#】WPF中嵌入web网页控件(WebBrowser、WebView2、CefSharp)
文章目录 1.简介 1.1 WPF简介 1.2 WPF 体系结构 1.3 WPF入门开发 2.WebBrowser 2.1 WebBrowser特点 2.2 WebBrowser常用的属性.方法和事件 ...
- web前端JavaScript嵌入百度地图API的方法 最详细
web前端JavaScript嵌入百度地图API最详细的方法 一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
- Java嵌入式数据库H2学习总结(三)——在Web应用中嵌入H2数据库
H2作为一个嵌入型的数据库,它最大的好处就是可以嵌入到我们的Web应用中,和我们的Web应用绑定在一起,成为我们Web应用的一部分.下面来演示一下如何将H2数据库嵌入到我们的Web应用中. 一.搭建测 ...
- 转一下大牛的嵌入web页播放视频方法(转)
来自:http://www.cnblogs.com/bandry/archive/2006/10/11/526229.html 在Web页中嵌入Media Player的方法比较简单,只要用HTML中 ...
最新文章
- 出现 java.util.ConcurrentModificationException 时的解决办法
- 简单的客户端,服务端通信
- 6kyu Persistent Bugger
- apache php隐藏头信息的方法,科技常识:nginx/apache/php隐藏http头部版本信息的实现方法...
- 我的世界java版怎么装在u盘_我的世界选择器参数怎么使用?
- [css] 写出固定子容器在固定的父容器下水平垂直居中的布局
- 全球约30%的智能手机受高通新漏洞影响,打补丁状况不明
- 稀疏贴图 SparseTexture
- python 小说 云_python爬小说
- wps合并重复项并求和_Excel中重复项求和的方法
- 可靠数据传输(rdt)实现的底层原理
- If Slack But Ryver!
- php参考文献博客,科学网—博客文章可否作为参考文献引用? - 王德华的博文
- (3年工作经验)天天下班刷抖音,不如亲自跑去抖音瞧一瞧!
- 1042 Shuffling Machine (20 point(s)) - C语言 PAT 甲级
- 天猫登录html代码,天猫静态页面
- 手机网络邻居访问电脑_一起来看看手机如何访问电脑局域网共享的文件夹
- Bootstrap进阶四:jQuery插件详解
- SSM上传图片并保存图片地址到数据库
- photoshopc cc抠头发丝详细教程
热门文章
- 填坑-十万个为什么?(18)
- Flutter知识点:数据存储之sqflite
- java String.intern();
- C语言的声明的优先级规则
- Listview 的应用 Day04 2014-0605
- JS 打印 iframe
- Fedora10使用若干问题
- SQL Server Alwayson架构下 服务器 各虚拟IP漂移监控告警的功能实现 -1(服务器视角)...
- Codeforces 402 and 403 (Div. 2 and 1)
- uva 820 Internet Bandwidth