对于熟悉Web的人都知道Web实现的界面更加炫酷，css样式以及js的强大功能，能够让界面发挥最大的视觉效果，下面就来说一下在Qt中如何加载Html并且实现与Js的交互。
首先我们准备这样一个Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="map1" style="width:500px;height:500px;margin:0px;padding:0px;background-color:red;"></div>
</body>
</html>在Qt中要想加载Html页面，需要使用到QWebEngineView这个对象，该对象需要引入头文件。
QWebEngineView集成了浏览器的webkit内核和google的v8引擎
- Qt5.4之前：webkitwidgets模块 - QWebView
- Qt5.4之后：webenginewidgets模块 - QWebEngineView
在.pro文件中加上QT += webenginewidgets
#include <QWebEngineView>QWebEngineView负责加载Html内容并进行显示，创建QWebEngineView实例，使用load()加载html文件。
QWebEngineView *m_QWebEngineView = new QWebEngineView(this);
m_QWebEngineView->load(QUrl::fromLocalFile(mapPath));//加载html
this->layout()->addWidget(m_QWebEngineView);如果只是显示Html页面，没有Js交互，则以上内容就完成了。但如果需要与Html页面中的Js进行交互则需要使用到另外一个对象：QWebChannel，引入头文件。
在.pro文件中加上QT += webenginewidgets webchannel
#include <QWebChannel>QWebChannel是Qt与Js通信的通道，通过注册Js上下文实现响应Js调用Qt槽函数，创建一个类文件，定义槽函数用于接收Js的调用。
#ifndef JSCONTEXT_H
#define JSCONTEXT_H
#include <QObject>
#include <QMessageBox>
/**
* qt与js交互的上下文类
* js通过槽函数实现与qt进行数据交互，在此类中定义接收js参数的槽函数
*/
class JsWebContext : public QObject
{
Q_OBJECT
public:
explicit JsWebContext (QObject *parent = nullptr);
signals:
public slots:
void jsCallMe(const QString &msg);
};
#endif // JSCONTEXT_H除此之外，还需要Qt官方提供的qwebchannel.js文件，如果在安装Qt时选择了安装源码，则在本地安装路径中可以找到这个文件
该js文件需要通过Qt注入的形式加载到Html中，否则会无法识别，由于Js需要使用的Html元素有可能在还没有加载完成，所有最好是在等待页面加载完成后进行写入，通过绑定加载完成信号来完成。
connect(m_QWebEngineView, &QWebEngineView::loadFinished, this, &MapForm::slt_webLoadFinish);QWebEngineView在加载完Html页面后会发送loadFinished信号，在其槽函数中，通过读取qwebchannel.js和自定义的js文件，注入到Html页面中
void MapForm::slt_webLoadFinish() {
QFile filewebjs(":/Resources/qwebchannel.js");//引入qt自带的js文件
QFile customjs(":/Resources/custom.js");//引入
if (!filewebjs.open(QIODevice::ReadOnly)||!customjs.open(QIODevice::ReadOnly)) {
return;
}
QByteArray bywebjs = filewebjs.readAll();
QString strreportjs = customjs.readAll();
bywebjs.append(strreportjs);
filewebjs.close();
customjs.close();
webchannel = new QWebChannel(m_QWebEngineView);//创建通道
m_JsContext = new JsContext();//创建js上下文
webchannel->registerObject("m_JsContext", m_JsContext);
m_QWebEngineView->page()->setWebChannel(webchannel);
m_QWebEngineView->page()->runJavaScript(bywebjs);
QString fun = QString("setWinSize('%1','%2')").arg(this->width()).arg(this->height());
m_QWebEngineView->page()->runJavaScript(fun);
}custom.js中的函数如下
// 定义webchannel对象并初始化===========================
var webobj;
new QWebChannel(qt.webChannelTransport, function(channel)
{
webobj = channel.objects.webContext;
window.foo = webobj;
});
//设置窗体宽高，Qt中调用的函数
function setWinSize(w,h){
var m = document.getElementById('map1');
m.setAttribute("style","width:"+w+"px;height:"+h+"px");
}
// 点击网页中的按钮调用Qt中的槽函数
var btn = document.getElementById("btn");
btn.onclick = function()
{
sendMsg("传递参数到Qt槽函数");
}
// 向qt发送文字消息
function sendMsg(msg)
{
if(typeof webobj == 'undefined')
alert("context对象获取失败！");
else
webobj.jsCallMe(msg);//onMsg是Qt中的槽函数
}总结：在Qt中定义槽函数，使用qwebchannel.js提供的功能调用Qt的槽函数传递参数，Qt中通过m_QWebEngineView->page()->runJavaScript(fun);调用Js文件中的函数
