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=

IT1995

2764人浏览 · 2020-06-23 13:04:05

IT1995 · 2020-06-23 13:04:05 发布

首先是一个例子，网页结构如下：

代码如下：

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中这样修改即可。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^