编程技术文章分享与教程

网站首页 > 技术文章 正文

Qt 与 HTML JS 的交互

hmc789 2024-11-22 15:30:28 技术文章 3 ℃

一. Qt使用类

1. QWebChannel

2. QWebEngineView


二. Qt JS文件

1. qwebchannel.js 一般在安装目录下 \webchannel\shared\qwebchannel.js


三. Qt代码

1. 定义交互类

#include <QWebEnginePage>

class JsClass: public QObject

{

Q_OBJECT

public:

explicit JsClass(QObject *parent = nullptr);

// qt 调用 js 函数

void qt_exec_js(QWebEnginePage* page, const QString& param) {

page->runJavaScript(QString("print_info(\"%1\")").arg(param)); //调用函数带字符串类型参数一定需要加双引号

//page->runJavaScript(QString("print_info(%1)").arg(12)); //调用函数参数类型为数字类型

//page->runJavaScript(QString("print_info()")); //调用函数无参

}

public slots:

// js 调用 qt 函数

void js_exec_qt(const QString& param) {

qDebug() << param;

}

};


2. 主函数代码片段

QString url = "file:///E:/login.html";

QWebEngineView webView

webView.load(QUrl(url));

webView.show();


JsClass jsClass;

QWebChannel webChannel;

webChannel.registerObject("jsClass", &jsClass);

webView.page()->setWebChannel(&webChannel);


connect(&webView, &QWebEngineView::loadFinished, this, [](){ jsClass.qt_exec_js(webView.page(), "Hello word");});

//重要, 必须要等到 QWebEngineView 类把html加载完毕才能执行调用js的函数, 不然会出现找不到js函数的错误


四. HTML 和 JS 代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="demo"></div>

</body>

</html>


<script src = "./qwebchannel.js"></script> //把Qt中提供的js加入进来


<script>

var jsClassIns;

// 获取qt中 JsClass 类的实例

function initObj(){

if (typeof qt != 'undefined'){

new QWebChannel(qt.webChannelTransport, function(channel){

jsClassIns= channel.objects.jsClass; //名字和 webChannel.registerObject("jsClass", &jsClass); 第一个参数保持一致

});

}

}

// 调用Qt函数

function exec_qt(param){

if(typeof jsClassIns != 'undefined'){

jsClassIns.js_exec_qt(param);

}

}

//Qt 调用 js

function print_info(param) {

document.getElementById("demo").innerHTML = param;

exec_qt("Hello China"); //当Qt调用了 js, Js 也调用Qt函数

}

initObj();

</script>

Tags：

猜你喜欢

标签列表
最新留言