QT之QtWebKit与JavaScript交互(一)

QT之QtWebKit与JavaScript交互(一)

    最近一个GIS的项目涉及到QtWebKit以及与JavaScript的交互,所以就看来很多材料,关于QtWebKit的理论网上很多,但单纯来看是不足以明白内涵的,而网上关于QtWebKit的例子也数不胜数,大多都不够完整。QT自带的这方面的例子也很多,比如FormExtractor、FancyBrowser等,这两个例子对于学习QtWebKit以及与JavaScript的交互问题很有帮助。我发现了一篇关于FormExtractor例子的解释,写得很不错,对我理解QtWebKit与JavaScript帮助很大,特此分享:

转自:formExtractor: 在QtWebkit的javascript访问QObject的例子

现在写这个题目晚了点, QtWebkit一度是个比较火的话题(当然目前仍然很火), 这个formExtractor应该是在4.5的时候就存在于Qt的例子里了(QTDIR/examples/webkit/formextractor), 只是仔细看过这个例子的人估计还比较少。 这里简单分析一下这个例子, 算是给做webkit开发的人提供个扫盲性质的指导。

闲话少说, 先来看一个formExtractor的截图。
formExtractor screenshot

相关文件包括:

formextractor.pro
formextractor.ui
formextractor.h
formextractor.cpp
main.cpp
mainwindow.h
form.html
formextractor.qrc

整个程序的基本界面是用Designer设计的formextractor.ui文件,  左边白色背景的部分放了个QWebView, webview里显示的内容是一个html页面, 里面放了一个form;右边是普通的QWidget, 里面放了若干QLabel、QLineEdit等控件。 formextractor.cpp/.h是ui文件对应的窗体类, 用的是单继承的方式。 (关于如何在Qt程序中使用ui文件, 参考以前的blog文章:Qt4中ui文件的使用方法

mainwindow.cpp/.h是程序的主窗体, 作为formextractor的父窗体并提供菜单, 这两个文件与本文主题无关, 可以直接忽略不看。(另外截图上也没体现出来这个菜单, 不知道这个例子的文档是谁写的, 这么无厘头。恩, 羊八景同学提醒, 这个是mac下的截图, 菜单在全局桌面上, 所以看不到。 土了一把…囧)

form.html是个比较简单的html文件,里面放了一个form,并在按下提交按钮时调用formExtractor对象的submit方法。

简单介绍了一下工程的结构, 下面就是具体的代码了。 其实说到底, 在QtWebkit的javascript里访问QObject的最关键的关键就是下面这个方法:

void QWebFrame::addToJavaScriptWindowObject ( const  QStringnameQObjectobject )

我们要在js调用该QObject之前调用这个函数。 这个时机不好掌握, 不过我们可以按文档的建议, 把这个函数放在一个signal的槽里调用。 代码如下:

///   in constructor  ///
connect(ui.webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
this, SLOT(populateJavaScriptWindowObject()));
///   slot      ////
void FormExtractor::populateJavaScriptWindowObject()
{
ui.webView->page()->mainFrame()->addToJavaScriptWindowObject(“formExtractor”, this);
}

addToJavaScriptWindowObject的第一个参数是对象在javascript里的名字, 可以自由命名, 第二个参数是对应的QObject实例指针。 这样在javascript里就可以直接访问formExtractor对象拉, 就像在Qt里访问这个formExtractor一样, 是不是看上去超级简单? 当然事情不会总是怎么简单的。 如果我们翻开Qt文档关于addToJavaScriptWindowObject的说明就会发现, 还有一点非常重要的内容在文档中仅仅是一笔带过, 不注意看很可能就错过了重要的信息:

Make object available under name from within the frame’s JavaScript context. The object will be inserted as a child of the frame’s window object.

Qt properties will be exposed as JavaScript properties and slots as JavaScript methods.

有没有意识到蓝色字体显示的这句话意味着什么呢? 大概聪明的同学们都已经意识到了吧。 要想在js里调用Qt的方法, 还有一个重要的条件需要满足, 那就是把这个方法声明为槽函数, 普通的函数是不行的! 要想在js里直接访问到QObject的成员, 该成员必须定义为属性才行!  而这个QObject不一定非得是QWidget, 可以是任何QObject及其派生类的实例。 满足了上面的条件我们就可以在js里调用formExtractor的函数啦:

这里和调用任何js的变量和函数都是一致的, 具体看看js的语法就行了。

在Qt代码里同样可以访问webview页面中的内容, 如formExtractor的submit方法里就利用form元素的名字来找到该QWebElement进而得到它的值并显示在自己的窗体控件里, 代码如下:

void FormExtractor::submit()
{
QWebFrame *frame = ui.webView->page()->mainFrame();

QWebElement firstName = frame->findFirstElement(“#firstname”);
QWebElement lastName = frame->findFirstElement(“#lastname”);
QWebElement maleGender = frame->findFirstElement(“#genderMale”);
QWebElement femaleGender = frame->findFirstElement(“#genderFemale”);
QWebElement updates = frame->findFirstElement(“#updates”);

ui.firstNameEdit->setText(firstName.evaluateJavaScript(“this.value”).toString());
ui.lastNameEdit->setText(lastName.evaluateJavaScript(“this.value”).toString());

if (maleGender.evaluateJavaScript(“this.checked”).toBool())
ui.genderEdit->setText(maleGender.evaluateJavaScript(“this.value”).toString());
else if (femaleGender.evaluateJavaScript(“this.checked”).toBool())
ui.genderEdit->setText(femaleGender.evaluateJavaScript(“this.value”).toString());

if (updates.evaluateJavaScript(“this.checked”).toBool())
ui.updatesEdit->setText(“Yes”);
else
ui.updatesEdit->setText(“No”);
}

javascript和QtWebkit的交互就是怎么简单。

顺便再说两句题外话。 Qt自带的例子很多, 而且呈现越来越多的趋势, 要想在这一堆例子里找到和自己的需求符合的有点麻烦, 一个一个例子编译运行未免太罗嗦了。 grep关键字当然是一个不错的主意。 这里再推荐一个更直观的方法, 先到Qt文档网站上浏览关于Qt例子的文档。 该文档按照Qt的类将例子程序归档, 基本上每个例子都提供了截图、代码样例和代码分析, 很容易一眼看到自己需要的东西, 比到代码里瞎翻方便多了。
例子文档的地址是: http://doc.trolltech.com/4.6/examples.html

相关文章
相关标签/搜索