天天看點
傳回

QT4 QWebView與JS互動

QT調用JS：

簡單的執行 evaluateJavaScript 即可，把JS的函數和參數組合成一個字元串作為參數傳入，這個函數會傳回一個 QVariant 類型的傳回值，如果JS有傳回值的話，接收解析即可。

JS調用QT:

第一步：将QT視窗暴露到JS

構造時連接配接：

暴露：

void MainWindow::addMainWindowToHtml(){
    ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("QTWindow",this);
}

這樣就将QT視窗以 QTWindow 這個名字暴露給JS了。

第二步：在QT中實作 Q_INVOKABLE 的函數

定義：

public:
    Q_INVOKABLE void JsCallNoParam();

實作：

//暴露給js的無參函數
void MainWindow::JsCallNoParam(){
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
}

在JS:使用QT暴露的QTWindow調用Q_INVOKABLE的函數即可

function JsNoParam() {
        console.log("JsNoParam");
        QTWindow.JsCallNoParam();
    }

完整代碼：

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTimer>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow {
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
private slots:
    void onPageLoadFinished(bool);
    void on_btn_noparam_clicked();
    void on_btn_withparam_clicked();
    void on_btn_withreturn_clicked();
public slots:
    void addMainWindowToHtml();
public:
    Q_INVOKABLE void JsCallNoParam();
    Q_INVOKABLE void JsCallWithParam(int num,QString str);
    Q_INVOKABLE QString JsCallWithReturn();
private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QMouseEvent>
#include <QtWebKit/QWebView>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebFrame>
#include <QWebInspector>
#include <QWebSettings>
#include <QVariantList>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow){
    ui->setupUi(this);
    ui->webView->load(QUrl("qrc:/html.html"));
    //如果加載的html是本地的，則換成
    //ui->webView->load(QUrl::fromLocalFile("E:/html.html"));
    //頁面加載完成的消息
    connect(ui->webView, SIGNAL(loadFinished(bool)), this, SLOT(onPageLoadFinished(bool)));
    //将QT視窗暴露給html
    connect(ui->webView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()),this,SLOT(addMainWindowToHtml()));
    //html調試視窗
    QWebSettings *settings = ui->webView->settings();
    settings->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
    QWebInspector *inspector = new QWebInspector(this);
    inspector->setWindowFlags(Qt::WindowStaysOnTopHint | Qt::Dialog);
    inspector->setMinimumSize(300, 110);
    inspector->setPage(ui->webView->page());
    inspector->show();
}

MainWindow::~MainWindow(){
    delete ui;
}
//頁面加載完成
void MainWindow::onPageLoadFinished(bool){
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<ui->webView->url().toString();
}
//暴露QT主視窗到html
void MainWindow::addMainWindowToHtml(){
    ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("QTWindow",this);
}
//暴露給js的無參函數
void MainWindow::JsCallNoParam(){
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
}
//暴露給js的有參函數
void MainWindow::JsCallWithParam(int num,QString str){
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<num<<str;
}
//暴露給js有傳回值的函數
QString MainWindow::JsCallWithReturn(){
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
    return QString("This is a string from Qt window.");
}
//無參調用JS
void MainWindow::on_btn_noparam_clicked(){
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
    ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()"));
}
//有參調用JS
void MainWindow::on_btn_withparam_clicked(){
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
    ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithParam(123,\"QT String Param.\")"));
}
//JS有傳回值的情況
void MainWindow::on_btn_withreturn_clicked(){
    QVariant ret = ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithReturn()"));
    qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<" RET:"<<ret;
}

html.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      body, html{
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin:0;
      }
      input{
        width: 100%;
        height: 33.34%;
      }
    </style>
  </head>
  <body>
  <input type="BUTTON" value="無參調用QT" onclick="JsNoParam()"></input>
  <input type="BUTTON" value="有參調用QT" onclick="JsWithParam()"></input>
  <input type="BUTTON" value="QT有傳回值" onclick="JsWithReturn()"></input>
  </body>
  <script type="text/javascript">
    function JsNoParam() {
        console.log("JsNoParam");
        QTWindow.JsCallNoParam();
    }
    function JsWithParam() {
        console.log("JsWithParam");
        QTWindow.JsCallWithParam(2333,"JS String Param.");
    }
    function JsWithReturn() {
        var ret = QTWindow.JsCallWithReturn();
        console.log("JsWithReturn RET:" + ret);
    }
    function QtCallNoParam() {
        console.log("QtCallNoParam");
    }
    function QtCallWithParam(num,str) {
        console.log("QtCallWithParam param:" + num + " " + str);
    }
    function QtCallWithReturn() {
        console.log("QtCallWithReturn");
        return "This is a String from JS.";
    }
  </script>
</html>

效果：

QT4 QWebView與JS互動
  • 代碼連結：https://github.com/yangyang0312/QtTestCode/tree/master/QtExecuteJs
Qt 地圖開發 QWebView與JS互動 Qt與JS互動 QWebView與網頁
上一篇: qt qwebview inspect 調試
下一篇: Qt5.3正确使用QWebView

繼續閱讀