因WebView1兼容问题，如何在Qt中使用WebView2作为ActiveX控件

问题背景 #

我正在开发一款需要集成Google Maps的Qt应用，之前使用WebView1（基于IE的ActiveX控件），但它与最新Google Maps API存在兼容问题。WebView2（基于Edge Chromium渲染引擎）是更合适的替代方案，但不清楚如何在Qt应用中将其作为ActiveX控件集成。

当前环境配置 #

• 开发环境：Qt 5.15
• 目标平台：Windows 10
• 当前WebView：WebView1（基于Internet Explorer）

已尝试操作 #

• 已安装WebView2运行时和SDK
• 查阅微软官方WebView2文档，但示例主要针对原生Win32应用
• 跟随网上教程尝试创建WebView2基础ActiveX控件，但与Qt集成时遇到困难
• 在Qt和WebView2论坛搜索，未找到太多两者结合的具体信息

需求 #

需要以下内容：

• Qt中配置WebView2作为ActiveX控件的方法
• 所需额外依赖与设置
• 相关示例代码或文档参考
• 嵌入WebView2渲染Google Maps等复杂内容的最佳实践

解决方案 #

一、前置依赖确认 #

1. 确保已安装WebView2运行时（推荐常青版，用户端会自动更新）
2. 确认WebView2 SDK已正确安装，后续需将其路径配置到Qt项目中

二、Qt中集成WebView2 ActiveX控件的步骤 #

1. 注册WebView2 ActiveX控件

WebView2默认未注册为ActiveX控件，需手动执行注册：
打开管理员权限的命令提示符，执行：

regsvr32 "C:\Program Files (x86)\Microsoft\EdgeWebView2\Application\<版本号>\Microsoft.Web.WebView2.ocx"

替换<版本号>为你安装的WebView2运行时实际版本号，可在对应目录下查看

2. Qt项目配置

在Qt .pro文件中添加ActiveX支持：

QT += axcontainer

3. 代码实现示例

头文件（webview2widget.h）

#ifndef WEBVIEW2WIDGET_H
#define WEBVIEW2WIDGET_H

#include <QAxWidget>
#include <QWidget>

class WebView2Widget : public QWidget
{
    Q_OBJECT
public:
    explicit WebView2Widget(QWidget *parent = nullptr);
    void loadUrl(const QString &url);
    void loadHtml(const QString &html);

private:
    QAxWidget *m_webView2;
};

#endif // WEBVIEW2WIDGET_H

源文件（webview2widget.cpp）

#include "webview2widget.h"
#include <QDebug>

WebView2Widget::WebView2Widget(QWidget *parent) : QWidget(parent)
{
    m_webView2 = new QAxWidget(this);
    // 设置WebView2 ActiveX控件的CLSID
    m_webView2->setControl("{E6FDD21A-875E-4902-B7B6-68E7A5869018}");
    m_webView2->setGeometry(this->rect());
    m_webView2->setObjectName("webView2");

    // 绑定窗口大小变化事件，让控件随父窗口缩放
    connect(this, &QWidget::resize, [this](){
        m_webView2->setGeometry(this->rect());
    });

    // 初始化WebView2环境
    m_webView2->dynamicCall("Initialize()");
}

void WebView2Widget::loadUrl(const QString &url)
{
    if(m_webView2) {
        m_webView2->dynamicCall("Navigate(const QString&)", url);
    }
}

void WebView2Widget::loadHtml(const QString &html)
{
    if(m_webView2) {
        m_webView2->dynamicCall("NavigateToString(const QString&)", html);
    }
}

主窗口使用示例

#include "webview2widget.h"
#include <QMainWindow>

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent)
{
    WebView2Widget *webView = new WebView2Widget(this);
    setCentralWidget(webView);
    // 加载Google Maps
    webView->loadUrl("https://www.google.com/maps");
}

三、渲染Google Maps的最佳实践 #

1. 使用本地HTML文件：将Google Maps嵌入代码写入本地HTML文件，通过加载本地路径或loadHtml方法加载，避免跨域问题
2. 确保JavaScript支持：WebView2默认启用JS，若需自定义设置，可通过dynamicCall调整控件属性
3. 性能优化：
   • 禁用不必要的插件与扩展
   • 保持硬件加速开启（WebView2默认启用，可通过控件属性确认）
   • 复杂交互场景下，通过Qt与WebView2的JS桥接传递数据，减少页面重载

四、常见问题排查 #

• 控件初始化失败：检查CLSID是否正确，或WebView2运行时是否安装完整
• Google Maps加载空白：检查网络连接、是否存在广告拦截，若使用自定义地图需确认API密钥配置正确
• 信号槽绑定问题：Qt中ActiveX控件的信号槽需通过动态绑定实现，可通过querySubObject获取子对象后操作

内容的提问来源于stack exchange，提问作者Yanis600