QML中 Webview 元素的runJavaScript() 函数的使用方法

最新推荐文章于 2024-03-03 11:19:46 发布

转载最新推荐文章于 2024-03-03 11:19:46 发布 · 824 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hbrw/p/6698044.html

文章标签：

本文介绍QML中WebView组件如何使用runJavaScript()函数与HTML内的JavaScript进行交互，包括调用JS函数、传递参数及接收返回值的方法。特别强调了在WebView加载完成后才能成功调用JS函数，并提供了具体的应用实例。

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

QML 中的 WebView 的 runJavaScript() 函数

该函数能够通过函数名调用 HTML 文件中 位于标签 <script> </script> 之间的 JS 函数，能够附带参数 比如：

HTML 文件中 script 代码如下：

Qt 调用代码如下：

    WebView {

        id: webView

        width: parent.width

        height: parent.height - mapToptool.height - 1

        anchors.top: mapToptool.bottom

        anchors.topMargin: 1

        url: mapService.backUrl()

        onLoadProgressChanged: {

            if(webView.loadProgress == 100){

                 mapService.getAllPoiData();

    Connections {

        target: mapService

        onBackmessage: {

            if(mapService.getBackMessage().length > 0){

                //console.log(mapService.getBackMessage());

                var json = JSON.parse(mapService.getBackMessage());

                var data = [];

                for(var i=0;i<json["size"];i++){

                    var lo = json["contents"][i]["location"][0];

                    var la = json["contents"][i]["location"][1];

                    data.push(lo);

                    data.push(la);

                var queryStr = "createPoi("+JSON.stringify(data)+");";

                webView.runJavaScript(queryStr, function(result) { console.log(result); });

该功能可以实现通过上传本地数据，执行 JS 函数，得到需要的网页。然后展示出来！

特别注意： 当 WebView 没有加载完成前 执行了 runJavaScript() 函数时，无法生效，用上图的方式调用，亲测可行！然后，该 API 只能支持 Android 4.3 及以上版本，低版本无效，本人在 Android 5.0 上测试的，其他没测试过！

转载于:https://www.cnblogs.com/hbrw/p/6698044.html