Qt嵌入浏览器(六)——QCefView实现JS通信接口

JavaScript06

Qt嵌入浏览器(六)——QCefView实现JS通信接口,第1张

上一节中,我们完成了CEF各基本组件的封装,并完成了浏览器基本功能的实现。 >>点这里回顾上节内容

本节我们将尝试扩展所实现的各组件,实现浏览器与页面的双向通信。

本篇的小目标:

上一节曾提到过,CEF应用在默认情况下包含很多子进程,这些进程会共享同一个执行入口。除了主进程的各类处理接口外,CEF还提供了各类子进程的处理接口。而 页面到浏览器的消息通道 就可以借助对 渲染进程 的控制来实现,整体流程如下:

完成上述步骤后,在页面调用对应的消息通道函数时,V8处理器则会相应地进行处理,从而完成消息的发送。

另一方面,实现 浏览器到页面 的消息通道和第二节中基于Qt WebEngine的方法类似,CEF也提供了执行JS脚本的方法,只需在页面中定义好对应的消息接口,并通过执行脚本方法执行该接口即可完成消息的发送。

因此,实现双向通道主要的问题集中在针对渲染进程处理和JS脚本执行的扩展上。接下来先就渲染进程处理进行说明。

为了实现对渲染进程的处理,我们首先需要向上一节中封装的QCefContext中添加对渲染进程入口的解析和处理。具体实现如下:

上面的实现除了处理了CEF主进程外,还判断了子进程是否为渲染进程(Windows环境下的renderer进程和Linux环境下的zygote进程),如果发现当前处理的是渲染进程,则创建一个渲染进程处理器QCefRenderHandler的实例。QCefRenderHandler的声明如下:

和主进程CefApp的实现类似,这里也实现了CefApp接口,此外额外实现了CefRenderProcessHandler接口的OnContextCreated方法,来获取V8上下文的引用,具体实现如下:

上面的实现将sendMessage函数定义为消息通道,并注册到了window对象上。sendMessage函数的具体实现则放在v8Handler的实现中。QCefV8Handler声明如下:

QCefV8Handler通过实现CEF V8处理器的Execute执行方法,完成对所加载的JS函数的过滤,并进行相应的处理,实现如下:

这里首先对函数名和参数进行了校验,之后调用CefBrowser的IPC方法SendProcessMessage向主进程的CefClient发送消息,从而完成页面向浏览器主进程消息的传递。

要实现页面到浏览器的消息通道,除了完成了上面渲染进程的控制扩展,我们还需要在QCefClient中添加接收IPC消息的接口实现。首先在QCefClient头文件中声明对CefClient接口的重载:

然后实现这个接口,完成消息的接收处理:

可以看到这里只是对收到的消息进行了简单的转换,并通过信号发送给感兴趣的下游控件使用。在第四小节的实现中,我们将QCefClient封装到了QCefView中,因此在QCefView中也需要将这个信号转发给它的下游控件:

这样,QCefView接收JS消息的通道就实现完成了。

这里额外讲解一下有关js alert的特殊处理。要实现js调用alert方法时的弹窗提醒,需要额外在CefClient中实现CefJSDialogHandler接口的OnJSDialog方法,参考实现如下:

承前所述,浏览器到页面的消息发送通过CEF的JS脚本执行接口实现。首先在QCefView中,声明并实现一个执行JS脚本的方法:

然后指定一个特定的JS方法,作为消息通道使用:

如此,QCefView发送JS的通道也实现完成了。

完成了消息通道的实现,接下来我们实际使用一下我们定义好的消息通道。

首先是Qt端的实现,在MainDlg的initWebView方法中,添加对JS消息的监听,并将监听到的消息通过QMessageBox显示出来:

然后添加文本输入和发送按钮,并在按钮点击信号对应的槽中调用QCefView的消息发送方法:

接下来在页面端实现消息接收和发送的接口msgutils.js:

可以看到这里我们使用了上面定义的recvMessage和sendMessage两个函数。然后在页面上调用这些接口:

实际运行一下浏览器,并加载我们实现的这个页面,消息发送效果如下:

有关CEF消息通道的讲解就先进行到这里。下一节将分析使用CEF接口实现Https双向认证的方法。

>>返回系列索引

[1] Chromium Embedded Framework官网

[2] Chromium Embedded Framework官方教程

目前,web页面嵌入Qt框架方式:

Qt:系统、一级、二级菜单框架;底部消息栏。

Web:三级菜单子页面。

开发方式:在web环境下开发完成后,将单独页面嵌入到qt中,html、js等文件都作为资源加入到qt工程中。

1、html页面中引入webchannel库:

<script src="../../../../lib/qwebchannel.js"></script>

<script src="../../../../js/component/webchannel.js"></script>

其中,webchannel.js中,初始化了qt与web之间的通道,并定义qt与web之间的消息类型和内容。消息类型对应各个页面具体功能。新加的页面消息需要在该文件中添加。

2、Qt中相应子页面中加入web页面路径:

例如 epvl模型研判页面 JudgePool.qml:

以上步骤完成,就可以在Qt中看到web页面了。接下来需要注意的事项:

3、每个web页面下的初始化函数都必须在qt侧调用,因为初始化用到的一些如userinfo等信息需要Qt侧传入。并且在web页面初始化完成后调用。

(1)web页面中,加入页面初始化完成信号。

(2)Qt页面中,加入消息接收,并发送到web页面初始化消息。

(3)在webchannel.js中,加入web页面初始化函数。

4、遇到的问题:

(1)html中引入的js,如placecode.js等,都有初始化函数,凡是涉及到userinfo的都需要在qt侧调用。

(2)web中对文件名称大小写不区分,在Qt中严格区分。

(3)父页面弹窗中是一个iframe的情况,iframe初始化问题解决方法:

iframe的路径不能在父页面静态加载,这样会导致iframe的js先于父页面的js加载,正常逻辑应该父页面的js先加载

需要在父页面定义一个方法来触发iframe的初始化方法

(4)页面跳转之后,需要调用跳转目的界面方法的问题:

1.web端js需要发出跳转信号

举例:案事件库的案件详情界面中跳转至【案件比对】(case_lib.js)

2.qt端qml接收跳转信号,调用CommonFun.jumpSystemPage方法,再向web端发信号调用目的界面的方法

注意: 目的界面有可能是初次打开,需要等目的界面初始化完成才能发调用web端方法(CaseLib.qml)

3.qt端目的界面需要定义初始化完成的信号,便于其他qt界面知道界面初始化完成:

(<u>compare_case.js</u>)

(<u>CompareCase.qm</u>l)