Qt|使用QWebEngineView控件加载HTML使用及问题

这篇具有很好参考价值的文章主要介绍了Qt|使用QWebEngineView控件加载HTML使用及问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前一段时间项目中用到了加载html的功能,也遇到了一些比较奇奇怪怪的问题。

我的开发版本以及环境:VS2017 + Qt5.14.2

遇到的问题如下:

1:加载自己写的本地的html页面时,为什么第一次会很慢?

2:在一些电脑上加载html时,为什么会出现黑屏现象?

针对上述两个问题,开展我对QWebEngineVie控件的使用以及理解吧!

功能

1:添加控件

我们需要从QtDesigner中拖出一个承载html的控件,叫做QWebEngineView。

Qt|使用QWebEngineView控件加载HTML使用及问题

2:加载本地html

使用QWebEngineView加载html的方法有三种,这里我选中的是下面这种方法:

QWebEngineView::setUrl

那么,接下来是具体的加载方式:

QString qsHtmlPathRobot = QCoreApplication::applicationDirPath() + "/test/test.html";
 QUrl baseUrlRobot = "file:///" + qsHtmlPathRobot;
QFile fileRobot(qsHtmlPathRobot);
if (!fileRobot.open(QIODevice::ReadOnly))
{
    return; 
}
fileRobot.close();
ui.webRobot->setUrl(baseUrlRobot);

在加载html时,我们最好的方法就是先判断该路径是否存在,为了安全起见而已。

到这里,我们就会遇到开篇说的第一个问题,加载html会很慢。

因为html页面是自己写的自定义页面,在加载该页面时内容较多,比较慢,所以,我会将加载这部分放到了构造函数中。提前加载,解决加载慢的问题。

但是,又会出现另一种情况,如果该窗口是隐藏状态,即使是提前加载了html页面,也不会显示出来的。

不知道大家有没有遇到过这种问题,在我所用的开发环境中是出现的。

为了避免这个问题,当我加载这承载html的QWidget类时,将该类做了一些小改动

QtHtmlWidget *pHtml = new QHtmlWidget;
pHtml->setGeometry(-100, -100, 10, 10);
pHtml->show();

将该窗口的位置移动到程序中不可见的位置,这样就解决了问题1的情况。

3:Qt触发HTML消息

在我用到的功能中,我需要点击一个按钮,来更改html上显示的数据,那么用到的函数是:

runJavaScript

具体的使用情况:

ui.webHtml->page()->runJavaScript(qsHtmlParamter);

其中,qsHtmlParamter是需要传入的参数。

 4:HTML触发QT响应

在使用该功能时,与上述3中的功能会有一些不同。

QT在与HTML交互中,Qt用到了一个叫做:QWebChannels的类。

HTML中需要用到的是:qwebchannel.js

具体的HTML的发送这里不在进行详细解释,那么,在Qt这边我们该如何接收发送的消息呢?

首先,需要定义QWebChannels类来进行接收

#include <QWebChannel>
QWebChannel* m_pWebChannel;
m_pWebChannel = new QWebChannel(this);
//注册一个对象,html端通过此名称向PC端发送消息
m_pWebChannel->registerObject(QString("qtClicked"), this);
ui.webRobot->page()->setWebChannel(m_pWebChannel);

这里我定义的对象名称叫做"qtClicked",大家可以根据实际项目情况,与WEB端共同商量定义的。

定义成功之后,下面是最重要的一点,我们想要接收HTML的触发消息内容,在Qt这里,必须要与HTML的发送消息名称一致。

假设,HTML设置的发送函数名叫做,“sendMsg”,那么在QT端也必须要创建一个叫做该名称的函数,写法按照下面的格式进行。

public slots:
	void sendMsg(const QString& jsMsg); //接收html的消息

最最重要的是:一定要记得写 public slots,否则QT端无法接收到消息

到这里,简单的两端通讯已经完成了,操作起来很简单。

那么,我遇到的第二个问题该如何解决呢?

当我的功能开发完成之后,进入到测试阶段时,发现在有些电脑上html页面居然是黑屏,真的是无从下手,如果有遇到与我同样的问题的伙伴们,我来把解决方法推荐给大家。

在main.cpp中添加以下这段话,就可以完美解决该问题啦~

QApplication::setAttribute(Qt::AA_UseOpenGLES);

添加的方式,如下图所示:

Qt|使用QWebEngineView控件加载HTML使用及问题

qt quick版本大于 5.3时才可以使用,强制使用open gl ES2.0的版本
如果硬件不是很老,尽量不要禁用硬件加速

今天的更新就到这里喽~

我是糯诺诺米团,一名C++开发程序媛~文章来源地址https://www.toymoban.com/news/detail-451845.html

到了这里,关于Qt|使用QWebEngineView控件加载HTML使用及问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt自定义控件 —— 子控件与父控件的鼠标事件问题

    目录 0、引言: 1、问题描述: 2、解决方案: 3、解决后效果: 在 Qt自定义控件 —— 颜色选择组合控件 https://blog.csdn.net/YMGogre/article/details/128955257 一文中我们创建了自定义的组合控件,在该控件中包含了三个子控件 —— QGraphicsView 、 QLineEdit 和 QPushButton 。当我们通过 setIt

    2024年02月09日
    浏览(89)
  • QT:自定义控件(Connect使用,子控件连接)

    1.举例:主页面为mainwindow,设置的子控件为Form 2.主界面 3.子控件中需要实现:QSpinBox移动 QSlider跟着移动,QSlider移动 QSpinBox数字跟着改变 还需要实现,在主界面中读取和设置子控件的数值: 子控件添加接口: 主界面通过按钮调用接口:

    2024年02月13日
    浏览(32)
  • 【Qt 学习笔记】Qt常用控件 | 输入类控件 | Text Edit的使用及说明

    博客主页:Duck Bro 博客主页 系列专栏:Qt 专栏 关注博主,后期持续更新系列文章 如果有错误感谢请大家批评指出,及时修改 感谢大家点赞👍收藏⭐评论✍ 文章编号:Qt 学习笔记 / 29 1. 简介 QTextEdit是Qt中的一个可编辑的文本框控件,可以用于显示和编辑多行文本。 它是基于

    2024年04月28日
    浏览(48)
  • 解决QT中UI控件布局更改后运行结果没有发生变化的问题

    在学习QT中,遇到了一个问题,那就是当我UI中更改了控件布局后,运行的结果却并没有发生改变,于是我上网查找了一些资料,大多略显麻烦。 效果如下:这是UI控件更改布局后  这是运行后结果 显然,UI文件中并没有更新。 我的解决方案是: 1.首先在项目文件中找到UI文件

    2024年02月11日
    浏览(82)
  • STM32使用HAL库,串口收发一段时间后出错问题及解决

    当STM32使用HAL库进行开发时,偶尔会遇到串口收发数据量大时,会出现问题。比如同时串口同时收发,一段时间后就只能发送,接收不工作。或是只接收,但数据量大时也不工作。下面对这些问题和其解决办法进行整理。 当数据量过大且传输频率快时,串口可能会因为溢出,

    2024年02月16日
    浏览(40)
  • QT QLabel控件(使用详解)

            本文详细的介绍了TextLabel控件的各种操作,例如:显示边框、设置文字、设置字体、设置信息提示框、状态提示、居中对齐、加载图片、自适应图片大小、设置位置大小、样式表等操作。 本文作者原创,转载请附上文章出处与本文链接。 QLabel控件(使用详解)目录

    2024年02月15日
    浏览(41)
  • QT QToolBox控件使用详解

            本文详细的介绍了QToolBox控件的各种操作,例如:新建界面、添加页签、索引设置当前项、获取当前项的索引、获取当前项窗口、获取索引值是int的窗口、移除索引值项、获取项的数量、获取指定索引值、设置索引项是否激活、获取索引值项是否激活、设置项的图

    2024年02月09日
    浏览(35)
  • QT QCalendarWidget控件 使用详解

            本文详细的介绍了QCalendarWidget控件的各种操作,例如:设置日历的文本格式、设置日历的大小、日历移动、日历隐藏显示、设置日历时间最大值、设置日历时间最小值、单击信号槽、日历改变信号槽、双击鼠标信号槽等操作。         本系列QT全面详解文章目前

    2024年02月16日
    浏览(39)
  • QT QTabWidget 控件 使用详解

           本文详细的介绍了QTabWidget控件的各种操作,例如:新建界面、设置页面名字、设置提示信息、设置页面激活、设置标题栏位置、设置页面关闭按钮、设置页面关闭按钮、获取页面下标、获取页面总数、清空所有页面、删除某个页面、设置拖拽移动、设置显示页面、

    2024年02月03日
    浏览(40)
  • Compose布局之Image控件使用详解:加载网络图片与内容缩放

    本文详细介绍了Compose框架中Image控件的基础使用,包括加载网络图片、contentScale内容缩放等高级功能,帮助开发者更好地掌握Compose布局中的图片展示技巧。

    2024年02月11日
    浏览(105)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包