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

最新推荐文章于 2025-08-06 14:36:16 发布

weixin_33795093

最新推荐文章于 2025-08-06 14:36:16 发布

阅读量58

点赞数

文章标签： javascript c/c++ ui ViewUI

本文详细解析了如何在QtWebkit环境中通过JavaScript访问QObject实例的关键步骤，包括如何利用QWebFrame::addToJavaScriptWindowObject()方法，以及如何在JavaScript中调用Qt对象的函数和属性。同时，文章提供了代码示例，帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://hi.baidu.com/331703405/blog/item/82de913cb7d0773171cf6cd6.html

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

2010-05-17 11:09

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

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

void QWebFrame::addToJavaScriptWindowObject ( const QString & name, QObject * object )

我们要在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