[Qt] 利用QtWebKit完成JavaScript访问C++对象

最新推荐文章于 2021-03-21 18:11:27 发布

sukhoi27smk

最新推荐文章于 2021-03-21 18:11:27 发布

阅读量400

点赞数

http://blog.csdn.net/longsir_area/article/details/42965565

一. 介绍

在浏览器扩展或者WebApp的项目经常用的脚本语言JavaScript有很多局限性，比如，javascript语言不能够夸窗口访问js对象，不能直接读写磁盘文件（这个也正是发明人设计的安全机制吧，要不然，谁还敢用浏览器啊，几行代码就可以把你偷窥的一览无余），我们可能在我们的程序中需要扩展这个功能。

那么，我们怎么解决这些问题呢？或许你可以参考一下下面的设计架构。

UI利用Html + CSS + JavaScript编写，核心业务层利用C++编写，C++和JavaScript对象主要通过WebKit通信。让相应的语言做它们擅长的事情，这就是这种架构的核心。

WebKit又是什么呢？简单言之就是一种浏览器内核引擎，Safari、Chrome、FireFox等浏览器都采用WebKit引擎作为内核，由此可见WebKit的地位了，我们正是利用WebKit来做javascript的扩展的，Qt界又对WebKit做了一层封装，这样，开发者对WebKit就更加容易上手了。

更幸运的是，QtWebKit提供了一种将QObject对象扩展到Javascript运行环境的机制，这样，JavaScript代码将有权限访问QObject对象, QObject对象的所有属性也能在Javascript上下文中被访问。

那么，如何利用QtWebKit使得js和c++相互通信呢？

二. 搭建框架

首先，我们需要一个js代码能够运行的环境

我们准备一个主窗口，在主窗口内部添加WebView控件，使得程序具有执行js的能力；

MainWindow的定义

[cpp]view plaincopy 
   
 #include <QMainWindow>  
 #include <QGraphicsView>  
 #include <QGraphicsWebView>  
 #include <QGraphicsScene>  
 #include <QEvent>  
   
 #include "External.h"  
   
 class MainWindow : public QGraphicsView  
 {  
     Q_OBJECT  
 public:  
     MainWindow(QWidget *parent = 0);  
     virtual ~MainWindow();  
   
 private:  
     QGraphicsWebView*   m_pWebView;  
     QGraphicsScene*     m_pScene;  
 };  
   
 #endif // MAINWINDOW_H  

MainWindow的实现

[cpp]view plaincopy 
   
 #include "mainwindow.h"  
   
 #include <QWebFrame>  
 #include <QLayout>  
   
 MainWindow::MainWindow(QWidget *parent)  
     : QGraphicsView(parent)  
 {  
     this->resize( QSize( 800, 600) );  
       
     m_pScene = new QGraphicsScene(this);  
     if(NULL != m_pScene)  
     {  
         m_pWebView = new QGraphicsWebView;  
   
         if( NULL != m_pWebView)  
         {  
             //enabled javascript  
             QWebSettings *settings = m_pWebView->page()->settings();  
   
             settings->setAttribute(QWebSettings::JavascriptEnabled,true);    
             settings->setAttribute(QWebSettings::JavascriptCanAccessClipboard,true);  
             settings->setAttribute(QWebSettings::DeveloperExtrasEnabled,true);  
             settings->setAttribute(QWebSettings::LocalContentCanAccessRemoteUrls, true);  
             settings->setAttribute(QWebSettings::LocalContentCanAccessFileUrls, true);  
             settings->setAttribute(QWebSettings::JavascriptCanCloseWindows, true);  
             settings->setAttribute(QWebSettings::AutoLoadImages,true);  
   
             m_pScene->addItem( m_pWebView );  
             this->setScene( m_pScene );  
         }  
     }   
 }  
   
 MainWindow::~MainWindow()  
 {  
   
 }  

QWebSettings类是用于配置Web运行环境，我们首先配置了JavaScriptEnable＝true，使得这个web环境能够运行js代码，其他的选项不是必要的。

三. 添加QObject到js上下文

利用QWebFrame提供的方法我们可以很轻松的完成添加对象：

 void addToJavaScriptWindowObject(const QString &name, QObject *object, ValueOwnership ownership = QtOwnership);

注解：

addToJavaScriptWindowObject这个方法可以使c++对象object在js的上下中以name为名字而出现，object对象将被当作这个QWebFrame的一个子对象，这样，我们就可以把这个对象当作js的一个对象来使用了；

object对象的属性和槽都作为js方法在js上下文中展开，因此，js拿到这个对象就可以很随意的访问这个对象的属性和方法；

当这个页面析构后，这个对象在js上下文中也将消失，监听到信号javaScriptWindowObjectCleared() 后来重新调用下addToJavaScriptWindowObject即可。

我们先写一个测试页面index.html，主要功能就是测试Js是否能够访问external对象；

[html]view plaincopy 
   
 <!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/html; charset=utf-8" />  
 <title>QWebKitDemo</title>  
 <script type="text/javascript">  
   
 window.onload = function(){  
   
     var btnTest = document.getElementById("testCObj");  
     btnTest.onclick = function() {  
         alert(external);  
     }  
 }  
 </script>  
 </head>  
 <body>  
     <input type="button" id="testCObj" value="测试C++对象">  
 </body>  
 </html>  

我们先来定义一个继承自QObject的类External，其中，继承自QObject很关键，否则我们无法完成我们的功能；

External类的定义，这里我定义了一个带属性、信号、槽、带Q_INVOKABLE修饰的方法，这将在其他小节会用到

[cpp]view plaincopy 
   
 #ifndef EXTERNAL_H  
 #define EXTERNAL_H  
   
 #include <QObject>  
   
 class External : public QObject  
 {  
     Q_OBJECT  
     Q_PROPERTY(QString msg READ getMsg WRITE setMsg) // 声明静态属性msg  
 public:  
     explicit External(QObject *parent = 0);  
   
 signals:  
     void mouseClicked();  
 public slots:  
     void TestPassObject(QObject*);  
   
 public:  
   
     QString getMsg() const { return msg; }  
     void setMsg( const QString& strMsg ) { msg = strMsg; }  
   
     // 提供给Javascript方法,需要用Q_INVOKABLE修饰  
     Q_INVOKABLE int VerifyUserAccount(const QString& userName, const QString& userPwd);  
   
     Q_INVOKABLE QString GetPropMsg();  
   
     Q_INVOKABLE void TestPassObjectToNative(QObject*);  
   
     QString msg;  
 };  
   
 #endif // EXTERNAL_H  

我们为MainWindow类添加成员External对象指针

[cpp]view plaincopy 
   
 External* m_pExternal;  

在MainWindow的构造方法中对m_pExternal实例化，并为这个页面的javaScriptWindowObjectCleared信号关了槽函数AddJavascriptWindowObject

这样，我们的MainWindow.h和MainWindow.cpp就成这样子了:

MainWindow.h

[cpp]view plaincopy 
   
 #include <QMainWindow>  
 #include <QGraphicsView>  
 #include <QGraphicsWebView>  
 #include <QGraphicsScene>  
 #include <QEvent>  
   
 #include "External.h"  
   
 class MainWindow : public QGraphicsView  
 {  
     Q_OBJECT  
 public:  
     MainWindow(QWidget *parent = 0);  
     virtual ~MainWindow();  
 public slots:  
     void AddJavascriptWindowObject();  
   
 private:  
     QGraphicsWebView*   m_pWebView;  
     QGraphicsScene*     m_pScene;  
     External*           m_pExternal;  
 };  
   
 #endif // MAINWINDOW_H  

MainWindow.cpp

[cpp]view plaincopy 
   
 #include "mainwindow.h"  
   
 #include <QWebFrame>  
 #include <QLayout>  
   
 MainWindow::MainWindow(QWidget *parent)  
     : QGraphicsView(parent)  
 {  
     this->resize( QSize( 800, 600) );  
   
     m_pExternal = new External();  
       
     m_pScene = new QGraphicsScene(this);  
     if(NULL != m_pScene)  
     {  
         m_pWebView = new QGraphicsWebView;  
   
         if( NULL != m_pWebView)  
         {  
             //enabled javascript  
             QWebSettings *settings = m_pWebView->page()->settings();  
   
             settings->setAttribute(QWebSettings::JavascriptEnabled,true);    
             settings->setAttribute(QWebSettings::JavascriptCanAccessClipboard,true);  
             settings->setAttribute(QWebSettings::DeveloperExtrasEnabled,true);  
             settings->setAttribute(QWebSettings::LocalContentCanAccessRemoteUrls, true);  
             settings->setAttribute(QWebSettings::LocalContentCanAccessFileUrls, true);  
             settings->setAttribute(QWebSettings::JavascriptCanCloseWindows, true);  
             settings->setAttribute(QWebSettings::AutoLoadImages,true);  
   
             m_pScene->addItem( m_pWebView );  
             this->setScene( m_pScene );  
             connect(m_pWebView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),  
             this, SLOT(AddJavascriptWindowObject()));  
             m_pWebView->setUrl(QUrl("file:///Users/cblogs_code/QWebKitDemo/index.html"));  
          }  
     }   
 }  
   
 MainWindow::~MainWindow()  
 {  
   
 }  
   
 void MainWindow::AddJavascriptWindowObject()  
 {  
     m_pWebView->page()->mainFrame()->addToJavaScriptWindowObject("external", m_pExternal);  
 }  

m_pWebView->setUrl(QUrl("file:///Users/cblogs_code/QWebKitDemo/index.html"));

这一行是加载index.html，请尝试的同学自行修改成自己的index.html的绝对路径。

当网页加载时，会自动触发javaScriptWindowObjectCleared信号，继而我们的槽函数AddJavascriptWindowObject会被执行，上面关于AddJavaScriptWindowObject解释说：当这个页面析构后，这个对象在js上下文中也将消失，监听到信号javaScriptWindowObjectCleared() 后来重新调用下addToJavaScriptWindowObject即可，因此，想让external一直保持有效，这样做就可以了。

然后，运行一下程序吧，点击按钮，你会看到如下结果：

三. 调用QObject的方法

js要调用已经扩展的对象external的方法，需要一下约束：

1. 方法前需要Q_INVOKABLE修饰；

2. 方法返回值和参数必须是Qt内置类型或者c++内置类型，即使用typedef的也不行；

3. 方法返回值和参数可以是QObject*, 但参数不能传递js对象，传js对象用QVariant代替。

js中调用external的方法

[html]view plaincopy 
    
 var ret = external.VerifyUserAccount("user01", "123456");  
 if (ret == 1) {  
      alert("验证通过");  
  }else {  
        alert("用户名或者密码错误");  
 }  

操作QObject对象的属性

这节我们来尝试访问一下External对象的msg属性，并且修改TA，看看在Js层和C++层是否被修改。

还是先看看测试页面吧：

[html]view plaincopy 
   
 <!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/html; charset=utf-8" />  
 <title>QWebKitDemo</title>  
 <script type="text/javascript">  
   
 window.onload = function(){  
   
     var btnTest = document.getElementById("testCObj");  
     btnTest.onclick = function() {  
         alert(external);  
     }  
   
     var btnVisit = document.getElementById("visitProp");  
     btnVisit.onclick = function() {        
         var output = "js层面 \tmsg: "+external.msg + "\n c++层面 \tmsg: "+external.GetPropMsg();  
         alert(output);  
     }  
   
     var btnSetProp = document.getElementById("setProp");  
     btnSetProp.onclick = function() {  
         var tempValue = document.getElementById("msgProValue");  
         external.msg = tempValue.value;  
     }  
 }  
 </script>  
 </head>  
 <body>  
     <input type="button" id="testCObj" value="测试C++对象">  
     <p>测试属性msg</p>  
     <input type="button" id="visitProp" value="visit">  
     <input type="text" id="msgProValue" value="修改后的msg">  
     <input type="button" id="setProp" value="修改">  
 </body>  
 </html>  

运行程序，我们先点击visit按钮，可以看到，显示的msg属性都是空值，然后再文本框中输入字符，点击修改按钮，再点击visit按钮，试试看，弹出的msg是否有变化。

四. 绑定QObject对象的信号/槽

addJavaScriptWindowObject方法可以将对象的属性、信号、槽统统映射到Js上下文中。
绑定信号的方式如下

[html]view plaincopy 
    
 external.mouseClicked.connect(mouseClickedSlot);  
 function mouseClickedSlot() {  
     logger("mouse clicked");  
 }  

mouseClicked通过connect方法连接到js的方法(槽)，当mouseClicked被触发后，mouseClickedSlot将被执行

五. 为iframe添加QObject

当iframe被创建时，mainFrame下的webpage的信号frameCreated会被触发；

frameCreated的原型是：

[cpp]view plaincopy 
    
 void frameCreated(QWebFrame*);  

因此，我们可以为frameCreated关联一个槽，在这个槽中，为新创建的QWebFrame添加QObject；

代码如下：

1. 在MainWindow的构造函数添加

[cpp]view plaincopy 
    
 connect(this->m_pWebView->page(), SIGNAL(frameCreated(QWebFrame*)),  
             this, SLOT(ChildFrameCreated(QWebFrame*)));  

2. 为MainWindow类添加槽函数

[cpp]view plaincopy 
    
 public slots:  
     void AddJavascriptWindowObject();  
     void ChildFrameCreated(QWebFrame *frame);  

3. 为MainWindow类添加如下实现

[cpp]view plaincopy 
    
 void MainWindow::AddJavascriptWindowObject()  
 {  
     m_pWebView->page()->mainFrame()->addToJavaScriptWindowObject("external", m_pExternal);  
 }  
   
 void MainWindow::AddJavascriptWindowObject(QWebFrame *pFrame)  
 {  
     qDebug("AddJavascriptWindowObject");  
     //add external object to main web frame  
     pFrame->addToJavaScriptWindowObject("external", m_pExternal);  
 }  
   
 void MainWindow::ChildFrameCreated(QWebFrame *pFrame)  
 {  
     qDebug("ChildFrameCreated");  
     if(pFrame == NULL)  
     {  
         qDebug("Child frame created, but it was NULL!");  
     }  
     else  
     {  
         AddJavascriptWindowObject(pFrame);  
     }  
 }  

六. 总结

到目前为止，一个Hybrid模式的应用demo已经完成了，我们来分析一下这种模式的优劣；

1、优势：

高效率开发UI丰富的应用；
底层框架可复用；
可实现跨平台；
其他好处……

2、劣势：

性能
还是性能
其他劣势……

随着硬件的强大、html5的发展，不论是在pc端还是移动端，这种框架会得到普遍的认可，i think so。

猛戳下载代码

sukhoi27smk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Qt] 利用QtWebKit完成JavaScript访问C++对象

http://blog.csdn.net/longsir_area/article/details/42965565一. 介绍在浏览器扩展或者WebApp的项目经常用的脚本语言JavaScript有很多局限性，比如，javascript语言不能够夸窗口访问js对象，不能直接读写磁盘文件（这个也正是发明人设计的安全机制吧，要不然，谁还敢用浏览器啊，几行代码就可
复制链接

扫一扫