代码量不多,直接贴代码 (读起来一点不痛苦的) :
myWebView = new QWebView(this)//this 是main window widget, myWebView 是它的成员变量
myWebView->page()->settings()->setAttribute(QWebSettings::JavascriptEnabled, true)
myWebView->page()->settings()->setAttribute(QWebSettings::PluginsEnabled,true)
myWebView->page()->mainFrame()->addToJavaScriptWindowObject("mainWindowObject", this)//html页面中,可以通过"mainWindowObject"这个对象名访问主控件中的方法 (slot)
setCentralWidget(myWebView)
myWebView->setUrl( xxx )//xxx是你的url或本地html路径
//. . .
class MainWindow : public QMainWindow
{
//. . .
public slots:
void CPlusPlusFunction(const QString&str) //这个函数是将被JavaScript调用的
{
myWebView->page()->mainFrame()->uateJavaScript( QObject::tr("jsFunction('Popup Dialog')") )
}
}
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>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>myjstest</title>
<script language="JavaScript" type="text/javascript">
function jsFunction(values) //this function will be called from C++ codes
{
alert(values)
}
function test()
{
mainWindowObject.CPlusPlusFunction( "calling C++ function from javaScript" )
}
</script>
</head>
<body>
<div id="dest"></div><form action="" method="post">
<input type="button" name="" value="myTest" onclick="test()" />
</form>
</body>
</html>
这种方法,使用Webkit作为浏览器,如果你的页面使用了ActiveX控件(比如google earth插件),则不能正常工作。
这种情况下,你需要放弃Webkit,在主程序中调用IE 控件(WebBrowser Control)作为浏览器。(但是这样也失去了跨平台的支持,因为IE只能在Wndosw上跑。)
evaluateJavaScript执行的是QWebView容器内部的JS环境中得到方法,也就是说,say()这个方法你要在JS环境中能够访问.有两种方式可以实现say()函数,一种是用js代码写,然后在QWebView中调用,比如写到<script>标签内不着单独的js文件并在html中引用第二种是用Qt语言写,并将该函数声明注册给QWebView的引擎环境,方法是addToJavaScriptWindowObject.不清楚你的say()是用哪种方式实现的,如果是第一种,你可以直接用单独的浏览器,比如chrome,下用web develop工具调用测试,判断是不是函数语法或解析问题
如果是第二种,看下是否已经正确的注册给对应的运行环境.
上一节中,我们完成了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官方教程