QT与JavaScript交互

简介

        本篇主要对QT与JavaScript的交互方法通过代码进行详细说明，实现的QT版本是 4.8.7,

QT += webkit。完整代码中包含启动html调试窗口的方法。

QT中调用JS函数

// 调用js中的无参无返回值,名为QtCallNoParam的函数
ui->qwebView ->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()"));
// 调用js中的有两个参数无返回值，名为QtCallWithParam的函数
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithParam(123,\"QT String Param.\")"));
// 调用js中的无参有返回值，名为QtCallWithReturn的函数（返回值通过QVeariant接收）
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithReturn()"));

JS中调用QT函数

// JS调用QT对象的成员函数，要分为两步。
// 1 通过addToJavaScriptWindowObject将QT的对象暴露给js.在js中通过QTWindow调用QT的方法
ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("QTWindow",this);
// 2 在JS中调用的QT槽函数，属性必须是public slots 公有槽函数。
class ... 
{
    ...
public slots:
    // 设置QT对象暴露给JS的槽函数
    void addMainWindowToHtml();
    // 在js中调用的无参成员函数
    void JsCallNoParam();
    // 在js中调用的有参成员函数
    void JsCallWithParam(int num,QString str);
    // 在js中调用的有返回值的成员函数
    QString JsCallWithReturn();
    ...
};

注意：在将qt对象暴露给js时，要在js中执行qt对象之前暴露，否则js不认识qt的对象名称.所以通常通过链接QWedView的信号 javaScriptWindowObjectCleared，在槽中进行暴露。

完整代码

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 
#include 

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow {
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:

    // 设置QT对象暴露给JS的槽函数
    void addMainWindowToHtml();

    // 在js中调用的无参成员函数
    void JsCallNoParam();

    // 在js中调用的有参成员函数
    void JsCallWithParam(int num,QString str);

    // 在js中调用的有返回值的成员函数
    QString JsCallWithReturn();

private slots:

    // html文件加载完成槽函数
    void onPageLoadFinished(bool);

    // QT调用js中的函数（无参、有参、有返回值的按钮槽函数）
    void on_btn_noparam_clicked();
    void on_btn_withparam_clicked();
    void on_btn_withreturn_clicked();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow){
    ui->setupUi(this);

    // 加载资源中的 html
    // ui->webView->load(QUrl("qrc:/html.html"));

    // 加载本地html方式
    ui->webView->load(QUrl::fromLocalFile("/home/guoqr/html.html"));

    //页面加载完成的信号
    connect(ui->webView, SIGNAL(loadFinished(bool)), this, SLOT(onPageLoadFinished(bool)));

    //将QT窗口暴露给html（ 通过信号槽函数执行进行暴露设置，在js中可以通过暴露的对象 对qt中的成员函数调用 ）
    connect(ui->webView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()),this,SLOT(addMainWindowToHtml()));


    //html调试窗口（可以显示js中打印的日志和显示js代码）
    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__<webView->url().toString();
}

/// JS调用QT中的方法
/// 首先要通过 WebView 成员对象信号 javaScriptWindowObjectCleared链接槽函数addMainWindowToHtml
/// 在槽函数中，传入的第一个参数“QTWindow”是在JS中暴露的QT对象名称。第二个参数是第一个参数要表示的哪一个对象指针（对象是QObject子类）。
/// 在JS中调用的QT对象的函数必须是public并且是槽函数，经过slots声明的。

//暴露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__<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:"<

html.html

转载：https://blog.csdn.net/yangyang031213/article/details/84401031