(qt)qml与html通信(QWebChannel的使用)

本文介绍了如何使用QML的QWebChannel实现与HTML的通信。首先在QML中注册QtObject,设置WebChannel.id,并将对象添加到WebChannel。然后在HTML中引入qwebchannel.js,通过new QWebChannel获取并访问QML中的对象。此外,还展示了如何在QML中调用HTML的JavaScript函数。这是一个关于Qt跨平台通信的实用教程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

qml与html通信(QWebChannel的使用)

QML部分

流程:
实现流程:

1、注册QtObject对象,这里要声明WebChannel.id ,html通过这个id进行访问

2、定义WebChannel对象,通过registeredObjects属性添加需要在html中访问的对象

3、WebEngineView对象,设置webChannel属性为自定义对象,建立连接

import QtWebEngine 1.8
import QtWebChannel 1.0


QtObject {
        id: qtObject
        WebChannel.id: "channelqtObject"

        signal signaltest(var test)

        function getBodyHeight(bodyHeight)
        {
            console.log("---bodyHeiht---",bodyHeight);
        }
    }

    //*********************webQues 加载html****************************//
    Rectangle{
        id: webQuesRect
        width: 648
        z:1
        height: 340
        visible: false
        anchors.left: headerRect.right
        anchors.leftMargin: 20
        anchors.top: parent.top
        color: "transparent"
        WebEngineView {
            id:webQues
            anchors.fill:parent
            backgroundColor: "white"
            webChannel: myChannel
            smooth: true
            property url clearweb: "qrc:/resources/clearweb.html"
        }
    }

    WebChannel {
        id: myChannel
        registeredObjects: [qtObject]
    }

html部分

1、 引入外部qwebchannel.js 文件

2、new QWebChannel(qt.webChannelTransport, function (channel) {
console.log(“—QWebChannel–”)
qtObject = channel.objects.channelOcrQuesSearch;
}
);

创建QWebChannel对象,channel.objects就是你在qml中channel中注册的对象数组,通过id就可以访问到qml的对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body >
    <style>
        .wrapper {
            background-color: #000;
            color: #FFF;
            font-size: 24px
        }
  
    </style>
    <script type="text/javascript" src="http://img.jyeoo.net/banyin/pen/qwebchannel.js"></script>
    <script type="text/javascript">
        var qtObject;
        new QWebChannel(qt.webChannelTransport, function (channel) {
                console.log("---QWebChannel--")
                qtObject = channel.objects.channelqtObject;
            }
        );

        function js_getBodyHeight()
        {
            qtObject.getBodyHeight(document.body.scrollHeight);
        }

    </script>

    <div class="wrapper">

        <div class="qml-stem">
            <p style=""><span onclick="go_back(body.offsetHeight)">在做DNA的粗提取与鉴定实验时,玻璃棒搅拌出的较纯净的DNA的颜色以及DNA遇二苯胺(沸水浴)染成的颜色分别是<span
                        style="font-family: 'Times New Roman'"
                        qml-space-size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>( )</span></p>

       
    </div>
</body>

</html>

##另外
qml中访问html中的函数
WebEngineView中提供runJavaScript方法,可以直接运行html中的javaScript函数

webQues.runJavaScript("js_getBodyHeight()",null);

本文当学习记录使用,如果有不对的地方欢迎各位赐教,共同探讨学习

QMLHTML之间实现交互的方法有多种。一种常见的方法是使用QtWebChannel模块。在QML中,你可以创建一个WebChannel对象,并将其注册到WebEngineView的webChannel属性中。然后,在HTML中,你可以使用JavaScriptQML中的对象进行通信。具体步骤如下: 1. 在QML中,创建一个QtObject对象,并将其注册到WebChannel中。你可以为这个对象定义信号和函数,用于HTML中的JavaScript进行交互。例如,你可以定义一个signaltest信号和一个getBodyHeight函数。 2. 在WebEngineView中,将webChannel属性设置为你创建的WebChannel对象。这样,QMLHTML之间就建立了连接。 3. 在HTML中,你可以使用JavaScript代码QML中的对象进行交互。通过WebChannel对象,你可以访问在QML中注册的对象和函数。例如,你可以使用channelqtObject对象来触发signaltest信号,或者调用getBodyHeight函数。 另外,你还可以使用QtWebView模块来实现QMLHTML交互。在QML中,你可以使用WebView组件来加载HTML页面,并通过runJavaScript函数调用HTML中的JavaScript代码。在HTML中,你可以使用JavaScript代码QML中的对象进行交互。例如,你可以在加载完成后使用runJavaScript函数调用HTML中的函数,或者通过JavaScript代码修改QML中的属性。 总之,无论是使用QtWebChannel还是QtWebView,你都可以在QMLHTML之间实现双向的交互。通过信号和函数的调用,你可以在两者之间传递数据和执行操作。 #### 引用[.reference_title] - *1* [(qtqmlhtml通信QWebChannel使用)](https://blog.youkuaiyun.com/Hayatec/article/details/125336315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [运用webEngineView完成实现QMLHTML交互](https://blog.youkuaiyun.com/lethe0624/article/details/97656858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [QML WebView HTML简单交互](https://blog.youkuaiyun.com/weixin_43810973/article/details/84950203)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值