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();")