QT 与webkit(wke) 交互

最新推荐文章于 2021-07-08 15:08:51 发布

lacoucou

最新推荐文章于 2021-07-08 15:08:51 发布

阅读量2.4k

点赞数

分类专栏： QT 例子文章标签： qt wke

本文链接：https://blog.csdn.net/lacoucou/article/details/78550815

版权

QT 例子专栏收录该内容

39 篇文章 5 订阅

订阅专栏

使用的wke库来源：https://github.com/cexer/wke
参考示例：
http://blog.csdn.net/u012814856/article/details/70312494?locationNum=1&fps=1

1。需要文件
https://github.com/cexer/wke/tree/master/demo/libwke中的三个文件，放在工程目录wke文件夹中。

2.QT工程添加库，导入wke.lib

3.工程代码：

// 全局的 js 调用 c++ 的函数
wkeJSValue JS_CALL jsMsgBox(wkeJSState* es)
{
    qDebug()<<wkeJSParamCount(es);
    const char *text = wkeJSToTempString(es,wkeJSParam(es, 0));
    QString strtext=QString::fromUtf8(text);
    const char *title = wkeJSToTempString(es,wkeJSParam(es, 1));
    QString strtitle=QString::fromUtf8(title);

   QMessageBox::information(NULL, strtext, strtitle);

    return wkeJSUndefined(es);
}
void MainWindow::on_pushButton_1_clicked()
{
    wkeInitialize();
    wkeWebView* m_pWkeView = wkeCreateWebWindow(WKE_WINDOW_TYPE_POPUP,NULL,0,0,800,600);
    //绑定C++ 函数
    wkeJSBindFunction("msgBox", jsMsgBox, 2);
    //加载本地文件： index.html 文件内容见最后 资源下载    //https://github.com/wangying2016/JsCplusplusInteractons/tree/master/Html
    wkeLoadFile(m_pWkeView,".\\index.html");
    //下边的循环是为了等待加载网页，没有这个 showWindows将会显示空白
    while (1)
    {
        wkeUpdate();
        if (wkeIsLoadingCompleted(m_pWkeView))
            break;
        QThread::usleep(10);
    }
    wkeShowWindow(m_pWkeView,true);
}

效果图：
这里写图片描述
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试 js 调用 C++ 代码网页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <script type="text/javascript">
        function CallCPlusPlus() {
            msgBox("点击图片由 js 调用 C++ 弹窗", "提示");
        }
    </script>

</head>

<body>
    <img id="img_track_event_id" name="img_track_event_name" class="" src="images/bd_logo.png" width="300" height="128" onmousedown="CallCPlusPlus()" />
    <p>点击上图，由 js 函数调用 C++ 函数实现弹窗</p>
    <div>
        <div>html中，由 onmousedown 触发 js 函数 :</div>
        <div>
            function CallCPlusPlus() {
            msgBox("点击图片由 js 调用 C++ 弹窗", "测试");
            }
        </div>
        <div>而这个函数中的 msgBox 是一个标签，标记了对应的 C++ 中的一个全局函数：</div>
        <div>
            jsValue JS_CALL jsMsgBox(jsExecState es)
            {
            const wchar_t *text = jsToStringW(es, jsArg(es, 0));
            const wchar_t *title = jsToStringW(es, jsArg(es, 1));

            SOUI::SMessageBox(NULL, text, title, MB_OK);

            return jsUndefined();
            }
        </div>
        <p>这个函数由 es 传递 js 中的 标签 “msgBox” 传来的参数，然后 C++ 函数处理弹窗</p>

    </div>

</body>
</html>