QWebEngineView与js交互

天虎

已于 2024-03-16 16:21:34 修改

阅读量2.2k

点赞数 9

分类专栏： Qt 文章标签： qt

于 2024-03-08 16:43:32 首次发布

本文链接：https://blog.youkuaiyun.com/yth796/article/details/136565469

版权

1.先用QWebChannel建立交互通道

QWebChannel* channel = new QWebChannel(m_view);
m_view->page()->setWebChannel(channel);

2.在通道上注册交互对象变量。

MFWebChannelBridge* pBridge = new MFWebChannelBridge(channel);
channel->registerObject("webChannelBridge", pBridge);

3.Qt运行Js直接调用即可，注意：Js是异步运行的

m_view->page()->runJavaScript("onShowJsAlert3()");

4.Qt运行js，如果需要返回值，则要写回调函数

QString strJs = QString("onShowJsAlert4()");
    QWebEngineCallback<const QVariant&> resultCallback = [](const QVariant& v)
    {
        qDebug() << TR("4 Js的返回值是：") << v.toJsonObject();
    };
    m_view->page()->runJavaScript(strJs, resultCallback);

5.Js调用Qt，要先在<head>中添加<script src="qwebchannel.js"></script>

qwebchannel.js文件一般在Qt安装目录里可以找到。

然后页面中添加

<script>
      new QWebChannel(qt.webChannelTransport, function(channel)
      {
        window.bridge = channel.objects.webChannelBridge;
      })

</script>

即可获取到注册的交互变量webChannelBridge。

最后js中直接运行Qt的槽函数即可：

bridge.sltShowQtMsgBox1();

6.Js调用Qt，如果需要返回值，则要写异步处理函数

let qtRet = bridge.sltShowQtMsgBox2();
Promise.resolve(qtRet).then(function (result)
{
  console.log("2 asyn return Qt value=", result.vRet);
}, function (err)
{
});

参考：Qt QWebEngine 加载网页及交互，实现C++与JS 相互调用_qtwebengine-优快云博客

所有代码的7z压缩后的Base64编码如下：

（注意复制出来是一行，再Base64 Decode，保存成7z文件，再解压即可）

N3q8ryccAAQB/xZnhh8AAAAAAAAjAAAAAAAAAAchdHTgegUd/F0Ad67T4iHI9CNsL9EMmEK5wzvkCD2yRxroiAVn3ZpiVF6H96ugzwUiv5iWKamyqykD+bVS1iUdGjkF8Dr0JT9wzL0ZLudDKzT6L+G2ML82652PlrR8+2VjHwexPP3kktelj5BA2/vKniocGR2Ddd+TXMCe5ibR0Ohgt1PYMSHif9YSVrEqHrgJdlC0giOvWWOBmg84YRXozBk4k1DCjWgKbM6E6F8KeCak/nqOSkjiUDSP3xyCpN6GmE+zxxD2U64c1etOl1wrNdR80mXTdWQVsmlTRVJQTpiTjSmOsyeDZZTO1SupBzCueXIwQ7FgLKXffpCRbL/ziW6Iqfpn/ofvDgN7ckIkj6Bf58gvaRR5WSciQfbC2HGdyRrc20vwn5ozTtp3oP/edpQc7va2hoKX2jsXZ8cKS10sG1STjz7pCdj55dBPryro8i4TGh6LmXKanJ1sZXRugUJeL0hSKjsIfZqo3v

最低0.47元/天解锁文章