JS与Qt对象交互

JS与Qt对象交互：
JS->Qt:创建一个插件，然后在网页中使用embed标签嵌入Qt控件，它的所有public slots就像普通函数一样被网页中的JavaScript函数访问。
Qt->JS:网页加载JS函数完成后，Qt程序通过evaluateJavaScript函数就可以执行JS函数。

JS->Qt:
1）定义一个插件类，继承于QObject和WebKitPluginInterface：

 1 class EPGPLUGINSHARED_EXPORT EpgPlugin : public QObject, public WebKitPluginInterface  {
 2     Q_OBJECT
 3     Q_INTERFACES(WebKitPluginInterface) //声明WebKitPluginInterface是一个接口
 4 public:
 5     EpgPlugin();
 6     ~EpgPlugin();
 7 protected:
 8     QList<QWebPluginFactory::Plugin> plugins() const;
 9     QObject *create(const QString &mimeType,
10                             const QUrl &url,
11                             const QStringList &argumentNames,
12                             const QStringList &argumentValues) const;
13     void setWebView(QWebView *webView) {this->webView = webView;}
14     QWebView *webView;
15 private:
16     EpgDemo *label;//Qt控件
17 };    

2）实现的plugins方法，告诉浏览器插件支持的mimeType：

 1 QList<QWebPluginFactory::Plugin> EpgPlugin::plugins()const
 2 {
 3 
 4     QWebPluginFactory::MimeType mimeType1;
 5     mimeType1.name="application/x-qt-label";//添加插件支持的mimeType
 6     mimeType1.description=QObject::tr("label");
 7  
 8     QList<QWebPluginFactory::MimeType> mimeTypes;
 9     mimeTypes.append(mimeType1);
10  
11     QWebPluginFactory::Plugin plugin;
12     plugin.name=QObject::tr("epg plugin");
13     plugin.description=QObject::tr("epg plugin");
14     plugin.mimeTypes=mimeTypes;
15  
16     QList<QWebPluginFactory::Plugin> plugins ;
17     plugins.append(plugin);
18     return plugins;//返回插件
19 }

3）实现的create方法，给浏览器返回Qt控件：

 1 QObject *EpgPlugin::create(const QString &mimeType,
 2                 const QUrl &url,
 3                 const QStringList &argumentNames,
 4                 const QStringList &argumentValues) const
 5 {
 6     qDebug() << "EpgPlugin::create";
 7     Q_UNUSED(argumentNames);
 8     Q_UNUSED(argumentValues);
 9 
10     label->webView = webView;
11     label->setPixmap(QPixmap("/opt/test.bmp")); 
12     return label;//返回Qt控件
13 }

4）自定义的控件类：

 1 class EpgDemo : public QLabel
 2 {
 3     Q_OBJECT
 4 public:
 5     EpgDemo();
 6     ~EpgDemo();
 7     void hide();
 8 public slots:
 9     void version();
10     int getId(int id);
11 public:
12     QWebView *webView;
13 };

5）HTML中，Qt控件使用embed标签创建：

1 <embed type="application/x-qt-label" id='label' units="pixels" height=200 width=200 />

JS可以使用document.getElementById("label")获取到Qt控件的对象，然后就可以直接调用该对象的public slots方法。

1 function getId(var1)
2 {
3     ret=document.getElementById("label").getId(var1);
4     alert(ret);
5 }

或

1 <a href='javascript:document.getElementById("label").version();'>Change color!</a>

Qt->JS：
1）JS函数：

1 function helloWorld()
2 {
3     alert("hello,world!");
4 }

2）Qt调用：

1 webView->page()->mainFrame()->evaluateJavaScript("helloWorld();")