Qt嵌入网页

Posted 2023-02-20 Leslie X徐

Qt嵌入网页

1.QWebEngineView使用

pro文件：Qt += webenginewidgets

头文件：#include <QWebEngineView>、#include <QWebEngineSettings>

使用：

void Widget::initWebview()

    //创建QWebEngineView,会有一个独立窗口
    QWebEngineView* web = new QWebEngineView();
    //打开网页插件支持
    web->settings()->setAttribute(QWebEngineSettings::PluginsEnabled, true);
	//加载页面，可用sethtml,setUrl,load等
    web->load(QUrl("http://localhost:7310/"));
	//显示页面
    web->show();
	//绑定加载页面结束后的操作
    connect(web,&QWebEngineView::loadFinished,this,[this](bool ok)
      //操作，可以调用js函数
    );

2.调用 javascript

函数：

• 执行js：void QWebEnginePage::runJavaScript(const QString &scriptSource)
• 带返回值的执行js：void QWebEnginePage::runJavaScript(const QString &scriptSource, const QWebEngineCallback<const QVariant &> &resultCallback)

web->page()->runJavaScript("showVersion(true)");
//第二个为匿名函数，参数为js返回值
web->page()->runJavaScript("getVersion()",[](const QVariant &v)qDebug()<<v.toString(););

3.本地跨域访问——搭建服务器

首先需要有 qhttpserver 库 例子：https://gitee.com/leslie-x/qt-web-engine.git

头文件：#include "httpserver/qhttpserver.h"

void Widget::initHttpServer()

    server = new QHttpServer();
    QString urlBase;
    QString sslUrlBase;

    //get返回本地页面
    server->route("/", QHttpServerRequest::Method::Get, [] () 
          return  QHttpServerResponse::fromFile("index/index.html");
      );
    
    //添加js使用的本地资源路径
      server->route("/", [] (const QString &file,const QHttpServerRequest &req) 
          qDebug()<<"url:"<<req.url();
          return QHttpServerResponse::fromFile("index/" + file);
      );
      server->route("/assets/", [] (const QString &file,const QHttpServerRequest &req) 
          qDebug()<<"url:"<<req.url();
          return QHttpServerResponse::fromFile("index/assets/" + file);
      );

    //打开监听
      quint16 port = server->listen(QHostAddress::Any,7310);
      if (!port)
          qWarning() << QString("error:Http server listen [%1] failed").arg(port);
      
    
      urlBase = QStringLiteral("http://localhost:%1/").arg(port);
      qDebug()<<"urlBase:"<<urlBase;

输出：

urlBase: "http://localhost:7310/"
url: QUrl("http://localhost:7310/assets/index.370ea674.css")
url: QUrl("http://localhost:7310/assets/index.be6d5d0a.js")
url: QUrl("http://localhost:7310/hdri.hdr")