QWebEngine应用---基于QWebChannel实现网页与qt层交互

这篇具有很好参考价值的文章主要介绍了QWebEngine应用---基于QWebChannel实现网页与qt层交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Qt提供了QWebChannel实现和网页的通信,我们直接拿github上一个能直接运行的demo来做说明,demo是基于Widget,且页面是自己实现的页面,接着会介绍基于QML实现且页面是第三方网站如何使用的。

QWebChannel用法

我们先看看demo的运行效果

QWebEngine应用---基于QWebChannel实现网页与qt层交互,qt

 左边是widget界面,右边是QWebEngineView,两边支持互发消息。

大体原理是定义一个通信类,这个类为Document,通过这个类发送和接收消息,QWebChannel绑定这个类

    m_webView = new QWebEngineView();
    QWebEnginePage *page = new QWebEnginePage(this); //创建一个网页视图对象
    m_webView->setPage(page);

    QWebChannel *channel = new QWebChannel(this); //为网页视图页面创建通道channel
    channel->registerObject(QStringLiteral("document"), &m_document);//注册通道对象供JS调用,"document"为注册名,JS调用的对象名必须和它相同
    page->setWebChannel(channel); //设置通道
// qt端和HTML页面之间交互要用到的类
class Document : public QObject
{
    Q_OBJECT

public:
    explicit Document(QObject *parent = nullptr){}

    void sendText(const QString &text)
    {
        emit textSent(text);//发送给html页面
    }

public slots:
    //在HTML端的JavaScript中调用,在qt端显示
    void receiveText(const QString &text)
    {
        emit textReceived(text);//发送给主界面
    }

signals:
    //发送消息给HTML页面(此信号在html端的JavaScript中进行连接)
    void textSent(const QString &text);

    //发送消息给主界面
    void textReceived(const QString &text);
};

在页面中加载qwebchannel.js,这样就可以在js中创建QWebChannel对象,然后通过Document对象互发消息

QWebEngine应用---基于QWebChannel实现网页与qt层交互,qt

 QWebEngine应用---基于QWebChannel实现网页与qt层交互,qt

WebEngineView中使用 

Qt封装的东西用法还是比较简单的,在QML中的用法流程原理是一样的,代码如下:

    WebChannel {
        id: webchannel2

    }

    Document {
        id: docObj

        onTextReceived: function(msg){
            console.log("recv msg" + msg)
        }

        Component.onCompleted: {
            webchannel2.registerObject("document", docObj)
        }
    }

    WebEngineView {
        id: webView
        anchors.fill: parent
        anchors.leftMargin: leftRect.width
        webChannel: webchannel2

        url: "qrc:/index.html"
    }

Document用的和上面例子是同一个类,只是注册到qml来使用,网页端代码不变。通信类也可以直接创建QtObject的QML类型,实现一套信号和槽也可以。

在第三方页面中使用

上面的实现是自己写的html页面,html里能引入qwebchannel.js和创建QWebChannel对象,但第三方网页是人家写好的,我们该如何使用呢?

这就需要用到我们之前了解到的注入javascript技术。

网页加载完成后,注入qwebchannel.js的内容,通信之前注入js创建QWebChannel对象就可以了。

    WebEngineView {
        id: webView
        anchors.fill: parent
        anchors.leftMargin: leftRect.width
        webChannel: webchannel2

        url: "qrc:/index.html"

        onLoadingChanged: function(loadRequest) {
            if (loadRequest.status === WebEngineView.LoadSucceededStatus) {
                //注入qwebchannel.js
                webView.runJavaScript(docObj.getWebchannelJs())
                //创建QWebChannel对象,并设置send点击效果
                var test = "var content = null; new QWebChannel(qt.webChannelTransport, function(channel){content = channel.objects.document;content.receiveText(\"redy.....\");});document.getElementById(\"send\").onclick = function(){var input = document.getElementById(\"input\");content.textSent.connect(function(message){output(\"recv data: \" + message);});var text = input.value;if (!text){return;}input.value = \"\";content.receiveText(text);}"
                webView.runJavaScript(test)
            }
        }
    }

需要注意的是需要定义document对象为全局变量,代码中用content接收document作为全局变量,这样其他地方才能使用document对象。

结语

关于QWebChannel实现与网页的通信就这些内容,因为网上基本都是基于QWebEngineView实现的,这里做了WebEngineView中使用的说明。文章来源地址https://www.toymoban.com/news/detail-626247.html

到了这里,关于QWebEngine应用---基于QWebChannel实现网页与qt层交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 基于Qt5的图像交互控件开发(C++实现)

    博主近期看到海康VM、halcon以及visionpro视觉软件都包含一个图像智能交互控件,然后近期根据其中的技术原理,也基于Qt5仿照开发了一个类似的功能,包含矩形、旋转矩形、任意多边形、圆、圆环、扇环,直线卡尺以及圆卡尺等常用控件,图像智能交互是在计算机视觉领域中

    2024年02月05日
    浏览(57)
  • Coin3d环境搭建(VS2019+QT),实现基于Open Inventor机器人图形交互

    先下载VS2019下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux (microsoft.com)    这里点下载然后界面拖到最下点击较早的下载项      下载这个2019社区版的,下载好后勾选python开发和使用C++的桌面  然后下载QTIndex of /archive/qt,点这个5.12,然后点5.12.4,下3.6G的   ,   然后QT下载

    2024年02月10日
    浏览(39)
  • 基于 Vue3 和 WebSocket 实现的简单网页聊天应用

    一个基于Vue3和WebSocket的简易网络聊天室项目,包括服务端和客户端部分。 项目地址 websocket-chat 下面是项目的主要组成部分和功能: 项目结构 功能特性 私聊功能:用户可以选择联系人进行一对一私聊,发送即时消息。 群聊功能:用户可以加入群组,与群组成员进行群聊。

    2024年02月03日
    浏览(51)
  • Linux Qt5.15.2 编译QWebEngine源码支持音视频H264

    默认自带的QWebEngine 因版权问题不支持音视频功能,需要自己编译源码以支持。 平台:Linux(UOS V20 1050) Qt:5.15.2 下载 Qt 5.15.2 对应版本源码,使用镜像网站或者Qt Maintenance Tool工具下载。 配置 Qt 环境变量 将以下内容追加到bashrc文件后 刷新使其生效 这个阶段可以预先安装所

    2024年02月05日
    浏览(61)
  • QWebEngine应用---cookies存储及自动登录

    浏览器Cookie指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据,当前主流网站和浏览器都使用Cookies来实现自动登录 QWebEngine基于Chromium内核,和Chrome浏览器一样支持cookies的管理和操作。在QWebEngine模块中,QWebEngineCookieStore提供信号信号来获取cooki

    2024年02月12日
    浏览(28)
  • Qt5.15.10+msvc2019_x86+qwebengine(含mp4)源码编译

    win10 64bit 英文版(或者把“区域”-“管理”-“非Unicode程序中所使用的当前语言”-改为\\\"英语(美国)\\\") 内存16g够用,cpu性能越高越好,硬盘在安装环境、下载源码后,至少还有100g可用空间 https://download.qt.io/archive/qt/5.15/ 1、安装 vs_community_2019.exe 勾选桌面C++开发工具 2、安装

    2024年02月09日
    浏览(48)
  • JavaScript实现网页交互

    1.JavaScript简介 JavaScript 是⼀种 基于对象的、事件驱动型的、解释型的脚本语⾔, JS设计的⽬的是实现⽹⻚的交互能⼒ •基于对象:(区别于⾯向对象),JavaScript和Java语⾔⼀样可以通过对象调⽤⽅法 obj.fn() •事件驱动:⽹⻚⽂档中的HTML标签事件触发JavaScript代码执⾏ •解释

    2024年02月09日
    浏览(38)
  • LLMs之RAG:基于LangChain框架利用ChatGPT的API实现一个与在线网页交互的对话机器人—五大思路步骤—加载文档WebBaseLoader网址文件→文档分割(chunk_size=50

    LLMs之RAG:基于LangChain框架利用ChatGPT的API实现一个与在线网页交互的对话机器人—五大思路步骤—加载文档WebBaseLoader网址文件→文档分割(chunk_size=500)→文本嵌入化(OpenAIEmbeddings)并存储到向量库(Chroma)→构造Prompt(拉取一个对象并将其返回为 LangChain对象)→定义LLMs(ChatOpenAI)→输入

    2024年02月08日
    浏览(48)
  • 使用Selenium实现GPT网页端交互

    笔者最近在做一个gpt有关的项目,数据量百万条不想花钱买token,发现Selenium可以模拟网页端操作,因此小试一下。 首先想用openai的gpt上手,但其反爬机制太过严格了,头修改、设置cookies和指纹修改都不行,一直在人机验证的地方徘徊。遂失去耐心,干脆直接换了个网址,用

    2024年04月25日
    浏览(28)
  • 基于Qt4开发曲线绘制交互软件Plotter

    目前市面上有很多曲线绘制软件,但其交互功能较差。比如,想要实现数据的交互,同步联动等,都需要大量繁琐的人工操作。所以讲想开发一款轻量级的曲线绘制交互软件。下面就以此为案例,记录一下基于Qt4的开发过程。 目录 1 需求 2 技术路线 3 开发流程 1 框架搭建 2

    2024年01月21日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包