Qt工作笔记-WebEngineView调用web站点中的JS脚本(含Vue Cli脚本)

首先是一个例子,网页结构如下:

代码如下:

index.html

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<head>
</head>

<body>
<h1>Hello World</h1>
<script type="text/javascript" src="js.js"></script>

<script type="text/javascript">

	function callFunctionDemo(){

		alert("Hello World");
	}
	
</script>

</body>

</html>

js.js

;

function jsFileCall(){
	
	
	alert("jsFileCall");
}


function jsFileCall2(str){
	
	
	alert("str:" + str);
	return str;
}

qml是这样的代码:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtWebEngine 1.0
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480


    WebEngineView{

        id: web
        anchors.fill: parent
        url: "http://127.0.0.1:9998/"
    }


    Button {
        text: "Button"

        onClicked: {

            /*
            var functionStr = "callFunctionDemo()";
            web.runJavaScript(functionStr, function(result){

                console.log(result);
            });
            */
            var functionStr = "jsFileCall()";
            web.runJavaScript(functionStr, function(result){

                console.log(String(result));
            });
        }
    }
}

点击按钮后:

当是这样的代码:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtWebEngine 1.0
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 640
    height: 480


    WebEngineView{

        id: web
        anchors.fill: parent
        url: "http://127.0.0.1:9998/"
    }


    Button {
        text: "Button"

        onClicked: {

            /*
            var functionStr = "callFunctionDemo()";
            web.runJavaScript(functionStr, function(result){

                console.log(result);
            });
            */
            var functionStr = "jsFileCall2(12345)";
            web.runJavaScript(functionStr, function(result){

                console.log(String(result));
            });
        }
    }
}

点击按钮后:

qml接受到的数据

下面还有种情况,当前端是vue cli的时候。这里就简单提一下了。

在xxx.vue中的mounted中添加window.xxxx=this;这样在控制台使用window.xxx.zzzz这个zzzz就是对应vue中的methods的函数,然后再qml中这样修改即可。

 

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值