QWebkit和网页通讯

最新推荐文章于 2021-06-08 12:44:25 发布

_xiaoyan_

最新推荐文章于 2021-06-08 12:44:25 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

文章标签： qt QWebkit和网页通讯

本文链接：https://blog.youkuaiyun.com/u012915226/article/details/78415965

首先写一个继承QObject的类

头文件cloudwebkit.h

#include <QObject>

class CloudWebkit : public QObject
{
    Q_OBJECT
public:
    explicit CloudWebkit(QObject *parent = 0);

signals:

public slots:
    void onCall(const QString &imageUrl);//此函数会在js中调用
};

源文件cloudwebkit.cpp

#include "cloudwebkit.h"
#include <CustomControl/cloudimagestorewidget.h>

CloudWebkit::CloudWebkit(QObject *parent) : QObject(parent)
{

}

void CloudWebkit::onCall(const QString &imageUrl)
{
    CloudImageStoreWidget *pMain = (CloudImageStoreWidget*)parent();
    pMain->getValueFromWeb(imageUrl);
}

主界面的类.h

#include <QWidget>
#include <CustomControl/cloudwebkit.h>
#include <NetWork/udloadnetwork.h>

namespace Ui {
class CloudImageStoreWidget;
}

class CloudImageStoreWidget : public QWidget
{
    Q_OBJECT

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

    UDLoadNetwork *loadNetwork;

    void getValueFromWeb(const QString &ImageUrl);


protected slots:
    void populateJavaScriptWindowObject();


public slots:
    void Call_JS_Clicked(QString backStr);



private:
    CloudWebkit *m_webObj;
    Ui::CloudImageStoreWidget *ui;
};

.cpp

#include "cloudimagestorewidget.h"
#include "ui_cloudimagestorewidget.h"
#include <QWebFrame>
#include <QDebug>

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



    m_webObj = new CloudWebkit(this);
    ui->webView->setUrl(QUrl(QStringLiteral("qrc:/index.html")));

    connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(populateJavaScriptWindowObject()));
}

CloudImageStoreWidget::~CloudImageStoreWidget()
{
    delete ui;
}


void CloudImageStoreWidget::getValueFromWeb(const QString &ImageUrl)
{
//网页点击发送传过来的数据
    qDebug()<<ImageUrl;

    Call_JS_Clicked(ImageUrl); //qt传数据到网页
}

void CloudImageStoreWidget::populateJavaScriptWindowObject()
{
    ui->webView->page()->mainFrame()->addToJavaScriptWindowObject(QString("cloudWebkit"),m_webObj);
}


void CloudImageStoreWidget::Call_JS_Clicked(QString backStr)
{
    QString back_str = QString("qt_back_str(\"%1\");").arg(backStr+"返回");
    ui->webView->page()->mainFrame()->evaluateJavaScript(back_str);
}

html代码

<html>
    <head>
        <script type="text/javascript" src="http://www.keyuelai.cn/static/admin/js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //为图片绑定点击事件
                $("#tu").click(function(){
                    //获得图片的src属性
                    var url=$(this).prop("src");
                     $('#tu').addClass("intro");
                    //将图片路径赋值到文本框中
                    $("#txtUrl").val(url);
                });
            });
             $(function(){
                $("#send").click(function(){
                    var send_url=$('#txtUrl').val();
                    window.cloudWebkit.onCall(send_url);
                });
            });
            function qt_back_str(back_str){
                $("#txtUrl").val(back_str);
            }
        </script>
    </head>
    <body>
    <center>
    <br />
        <img id="tu" src="http://www.keyuelai.cn/static/index/home/ceshi.jpg" width="200" height="200" /><br /><br />
        <input type="text" id="txtUrl" size="100" />
        <br /><br />
       <button id="send">发送</button>
    </center>
    </body>
</html>
<style type="text/css">
.intro{border-style:solid; border-width:2px; border-color:red} 
</style>

流程：首先点击网页上的发送按钮会执行window.cloudWebkit.onCall(send_url)，qt响应调用CloudWebkit的onCall(const QString &imageUrl)函数，

在调用CloudImageStoreWidget::getValueFromWeb(const QString &ImageUrl)这是从网页到qt的过程。然后是从qt到网页的过程：调用Call_JS_Clicked(ImageUrl)，

执行js中的function qt_back_str(back_str)。