加载JS

html内部直接加入js

出现问题: qt is not defined =》分离html与QT，JS通过QT代码注入

注入(html内部不包含此js文件引用)

`runJavaScript()`

connect(m_WebView, &QWebEngineView::loadFinished, [=]() {m_WebView->page()->runJavaScript(bywebjs);});

`QWebEngineProfile`: `scripts()->insert()`

QWebEngineProfile *profile = QWebEngineProfile::defaultProfile();QWebEngineScript script;
//    script.setName("qwebchannel.js");
//    script.setWorldId(QWebEngineScript::MainWorld);
//    script.setInjectionPoint(QWebEngineScript::DocumentCreation);
//    script.setRunsOnSubFrames(false);
script.setSourceCode(bywebjs);
profile->scripts()->insert(script);
m_WebView->load(QUrl(strHtml));

调试

https://doc.qt.io/QT-5/qtwebengine-debugging.html

qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "5566");

若不生效，可在命令行中添加 --remote-debugging-port=<port_number>
在这里插入图片描述

外部资源引入，一定带上`QUrl::fromLocalFile()`

m_WebView->load(QUrl::fromLocalFile(strHtml));

QWebChannel: 与js交互

创建通信类

m_Report = new DReportChannelCmd(this);

创建QWebChannel通道

m_pWebChannel = new QWebChannel(this);

注册C++交互类对象

m_pWebChannel->registerObject("context", m_Report);  // js获取qt对象时所使用的索引名channel.objects.context

设置为当前页面的通道

m_pWebView->page()->setWebChannel(m_pWebChannel);

书写js

'use strict';
// document.sandbox="allow-same-origin allow-popups allow-forms allow-scripts";var htmlcontent;
new QWebChannel(qt.webChannelTransport,
function(channel) {htmlcontent = channel.objects.context;
});
document.getElementById("checkresult").onchange=function(){var html = document.getElementsByTagName('html')[0].innerHTML;htmlcontent.fromWebPageToLocal(html);alert(html);
}

注意JS的放置顺序：浏览器自上而下解析，JS需要的标签可能还不存在。建议在页面加载完成后再注入JS。

connect(m_WebView, &QWebEngineView::loadFinished, [=]() {m_WebView->page()->runJavaScript(bywebjs);});

完整代码

qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "9223");// 设置页面大小
int iwebheight = QPageSize(QPageSize::A4).sizePoints().height();
m_WebView = new QWebEngineView();
m_WebView->setFixedHeight(iwebheight);
ui.gridLayout_content->addWidget(m_WebView);// 加载页面
m_WebView->load(QUrl::fromLocalFile(strHtml));
connect(m_WebView, &QWebEngineView::loadFinished, this, &ReportWidget::OnWebLoadFinish);// 注入js交互
void ReportWidget::OnWebLoadFinish(){QFile filewebjs(":/Resource/report/qwebchannel.js");QFile filereportjs(":/Resource/report/report.js");if(!filewebjs.open(QIODevice::ReadOnly) || !filereportjs.open(QIODevice::ReadOnly)) {return;}QByteArray bywebjs = filewebjs.readAll();QString strreportjs = filereportjs.readAll();bywebjs.append(strreportjs);//QWebEnginePage *myPage = new QWebEnginePage(profile, m_WebView);//m_WebView->setPage(myPage);//myPage->scripts().insert(script);// web channel 与js交互：页面到本地m_ReportChannel = new DReportChannelCmd(this);connect(m_ReportChannel, &DReportChannelCmd::SaveHtmlFile, ReportManage, &DReportManage::OnSaveFile);  // 保存html文件： 由Channel类负责交互m_WebChannel = new QWebChannel(this);m_WebChannel->registerObject("context", m_ReportChannel);m_WebView->page()->setWebChannel(m_WebChannel);m_WebView->page()->runJavaScript(bywebjs);// 本地到页面传参： 对应js中的函数m_WebView->page()->runJavaScript(QString("AddSnapshotList('%1', '%2')").arg(strimgpath).arg(strimgscale));
});

QWebChannel为注入脚本的依赖库，一起放到页面加载之后。否则bywebjs中的内容可能提前被调用，导致无法识别标签。

problem

无法加载Qt5WebEngineCore.pdb

VS release版本设置生成pdb调试文件
在这里插入图片描述

在这里插入图片描述

资料：
Qt实现网页与本地应用(QWebEngine应用)之间的通讯（QWebChannel的使用）
Qt嵌入浏览器（二）——QWebChannel实现与页面的通信
QWebChannel - js: Uncaught ReferenceError: qt is not defined
PyQt5 内嵌浏览器注入 Javascript 脚本实现自动化操作
Qt嵌入浏览器（一）——QWebEngineView实现浏览器基本功能
QT Webkit 自动提交表单
qt QWebEngineView 使用和截屏显示绘制输出