QWebEngineView和QWebChanel的使用。

想要在qt中加载网页到widget中，需要使用到QWebEngineView，想要和网页端通信可以使用到QWebChanel。当然还可以使用QWebSocket。
QWebEngineView使用方法如下：

    m_pWebView = new QWebEngineView(this);QString htmlPath = QApplication::applicationDirPath()+"/test.html";QFile file(htmlPath);if (!file.exists())return;
`   m_pWebView->load(QUrl("file:///" + htmlPath));

使用QWebChanel方法如下：

m_pWebChannel = new QWebChannel(this);
m_pWebChannel->registerObject(QString("qtui"), this);//qtui这个标识是可以随意定义，只要web端中html也是使用qtui就能通讯上了。
m_pWebView->page()->setWebChannel(m_pWebChannel);

QWebChanel和web的通讯方法如下：
1、发信号，web负责连接。
2、创建槽函数，让web自己调用这个槽。
3、调用runJavaScript()这个接口，直接调用web定义的函数即可，且它支持同步异步发送。
4、头文件创建对象属性，让web端直接使用这个对象，我们就能从这个对象中拿到web赋予的值。如下：m_content。

代码示例1如下：
头文件

#ifndef WEBTEST_H
#define WEBTEST_H
#include <QtWidgets>
#include <QWebEngineView>
#include <QWebChannel>class WebTest : public QWidget
{Q_OBJECT
public:WebTest(QWidget *parent = nullptr);private:void initUi();void initConncetion();// 加载html文件void loadHtml();// 获取js函数返回值QString getJsRetString();public slots:void recieveJsMessage(const QString& jsMsg);private:QWebEngineView *m_pWebView;QWebChannel* m_pWebChannel;QPushButton* m_callJSBtn;QPushButton* m_getJsRetBtn;QLabel* m_lab;
};#endif // WEBTEST_H

cpp文件

#include "webtest.h"
#include <QFile>
#include <QCoreApplication>WebTest::WebTest(QWidget *parent) : QWidget(parent)
{initUi();initConncetion();
}void WebTest::initUi()
{m_callJSBtn = new QPushButton(QStringLiteral("调用JS"),this);m_getJsRetBtn = new QPushButton(QStringLiteral("获取JS返回值"),this);m_lab = new QLabel(this);m_pWebView = new QWebEngineView(this);m_pWebChannel = new QWebChannel(this);QGridLayout* lay = new QGridLayout();lay->addWidget(m_pWebView,0,0,5,5);lay->addWidget(m_callJSBtn,0,5,1,1);lay->addWidget(m_getJsRetBtn,1,5,1,1);lay->addWidget(m_lab,2,5,1,1);this->setLayout(lay);m_callJSBtn->setSizePolicy(QSizePolicy::Preferred,QSizePolicy::Preferred);m_getJsRetBtn->setSizePolicy(QSizePolicy::Preferred,QSizePolicy::Preferred);m_lab->setStyleSheet("background:rgba(0,0,155,100)");loadHtml();m_pWebChannel->registerObject(QString("qtui"), this);m_pWebView->page()->setWebChannel(m_pWebChannel);
}void WebTest::initConncetion()
{// 调用JSconnect(m_callJSBtn, &QPushButton::clicked, [&](){QString jsStr = QString("addCircle()");m_pWebView->page()->runJavaScript(jsStr);//异步调用});// 获取JS返回值connect(m_getJsRetBtn, &QPushButton::clicked, [&](){auto str = getJsRetString();m_lab->setText(str);});
}//加载地图
void WebTest::loadHtml()
{QString htmlPath = QCoreApplication::applicationDirPath() + "/BMap.html";QFile file(htmlPath);if (!file.exists()){return;}m_pWebView->load(QUrl("file:///" + htmlPath));
}//获取web端返回值
QString WebTest::getJsRetString()
{QEventLoop loop;QString jsStr = "getInfo();";QString retStr{};// 同步通过loop循环等到回调上来数据再继续m_pWebView->page()->runJavaScript(jsStr, [&](const QVariant &v){retStr = v.toString();loop.quit();});loop.exec();return retStr;
}//接收来自webhtml的消息
void WebTest::recieveJsMessage(const QString& jsMsg)
{m_lab->setText(jsMsg);
}

html文件

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AEdSNAu4uSOTMaQgiuFizrkNwheoSVHF"></script><script src="./qwebchannel.js"></script><title>Web测试</title>
</head>
<body><div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图缩放级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放// 添加一个圆形覆盖物
function addCircle()
{var point = new BMap.Point(116.404, 39.915);var circle = new BMap.Circle(point, 6000, { strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.3 }); //创建圆map.addOverlay(circle);            //增加圆// 给这个circle添加一个点击事件circle.addEventListener("click", function (event){new QWebChannel(qt.webChannelTransport, function (channel) {var qtui = channel.objects.qtui;qtui.recieveJsMessage("你点我干啥!");})});
}// 获取字符串文本
function getInfo()
{var textString = "HTML js返回值";return textString;
}
</script>

代码示例2如下：
头文件

#ifndef TESTINTERFACE_H
#define TESTINTERFACE_H#include <QObject>
#include <QMessageBox>class testinterface : public QObject
{Q_OBJECTQ_PROPERTY(QString content MEMBER m_content)
public:testinterface();void send(int type,QString msg);
signals:void dataChanged(QString content);void sendData(QString content);
public slots:void jscallme(QString msg);
private:QString m_content;
};#endif // TESTINTERFACE_H

cpp文件

#include "testinterface.h"testinterface::testinterface()
{
}void testinterface::send(int type, QString msg)
{if (type == 0){emit dataChanged(msg);}else if (type == 1){emit sendData((msg));}
}void testinterface::jscallme(QString msg)
{QMessageBox::information(NULL, "title", QString(QStringLiteral("测试传参：%1\n测试变量：%2")).arg(msg).arg(m_content));
}

html文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><script src="qwebchannel.js"></script> <script type="text/javascript">var recvData=function(text){document.write("测试2:"+text+"</br>");}var updateattribute=function(text){    document.write("测试1:"+text+"</br>");}new QWebChannel(qt.webChannelTransport,function(channel){var testinterface = channel.objects.testinterface;window.foo = testinterface;testinterface.content="恭喜发财";testinterface.jscallme("新年快乐");testinterface.dataChanged.connect(updateattribute);testinterface.sendData.connect(recvData);});</script>
</body>
</html>

QWebEngineView和QWebChanel的使用。相关推荐

QT 调用QWebEngineView显示网页
环境: Windows:10 C++ Qt:5.14.1 步骤: 第一步:需要在 xxxxx.pro 下添加 QT += webenginewidgets 第二步:mainwindow.h中添加 QW ...
hikvision v2.3控件网页demo_《快速掌握PyQt5》第三十章网页交互QWebEngineView
如果需要在程序中加载并显示网页,那QWebEngineView绝对是最佳的选择.该控件基于Chrome浏览器内核引擎,所提供的功能和方法还是比较强大的. 注:V5.11及更高版本的PyQt5中不包含Q ...
Qt5 中 QWebEngineView 的使用，让桌面客户端和 web 端友好通信
一.本文结构 Qt5 中 web 开发的基本配置,工程搭建. 加载 HTML 文件. Qt 界面窗口调用 HTML 中的 JavaScript 函数(Qt 调用 js) Qt 界面窗口获取 HTML ...
Qt文档阅读笔记-QWebEngineView及QML WebEngineView
这里主要是最近有给Java Web项目及Qt项目需要混合,自己搞的QtWebEngine没有问题,而用了项目里面的,就有问题,在此阅读下官方资料,看看能不能解决这样莫名其妙的问题,在此记录下本次的阅读 ...
.net网页input 赋值提交时空白_《快速掌握PyQt5》第三十章网页交互QWebEngineView...
如果需要在程序中加载并显示网页,那QWebEngineView绝对是最佳的选择.该控件基于Chrome浏览器内核引擎,所提供的功能和方法还是比较强大的. 注:V5.11及更高版本的PyQt5中不包含Q ...
qt打印预览html,QT 5.9 实现 QWebEngineView 打印html内容
英文引用网址: https://www3.sra.co.jp/qt/relation/doc/qtwebengine/qtwebengine-webenginewidgets-printme-exam ...
QWebEngineView 实现网页触屏滑动
问题描述: 最近遇到一个很棘手的bug,最初做需求的时候没考虑到通用,认为前端不会经常改架构,就写死了只对某个标签设置scrollbar的值,导致后面前端html架构改了之后,找不到相应的标签,触屏滑 ...
QWebView到QWebEngineView
vs2013中的Qt5插件从Qt Project Settings中没有能引入QWebEngineView和QWebChannel的模块,我们可以在vs2013中手动加入. 附加包含目录:(QTDIR ...
QWebEngineView如何忽略SSL证书错误
最近用QT写客户端软件,思路是使用QWebEngineView来绘制本地的html或者服务器上的html做界面展示.可是发现QWebEngineView在Load一个https的URL的时候,由于ss ...

QWebEngineView和QWebChanel的使用。

QWebEngineView和QWebChanel的使用。相关推荐

最新文章

热门文章