一. 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>
本文暂时没有评论，来添加一个吧(●'◡'●)