1. 程式人生 > >qwebkit的套殼開發

qwebkit的套殼開發

最開始沒有接觸過qt,至今也不是特表清晰,憑自己的理解記錄一下前端與qt的套殼開發。

一、qwebkit巢狀html頁面。

首先在資原始檔放置html檔案,我的檔名稱:style-new.html

<html>
    <head>
        <style>
        html,body,head,table{margin:0px; padding: 0px; border: 0px;}
        img,div{border: 0px;}
        /*谷歌、safari、qq瀏覽器、360瀏覽器滾動條樣式*/
        /*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
        ::-webkit-scrollbar
        {
            width: 8px;
            height: 8px;
            background-color: #F8F9FB;
        }
        /*定義滾動條軌道 內陰影+圓角*/
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 0px rgba(170,170,170,0.2);
            border-radius: 8px;
            background-color: #F8F9FB;
        }
        /*定義滑塊 內陰影+圓角*/
        ::-webkit-scrollbar-thumb
        {
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 0px rgba(170,170,170,.2);
            background-color: #EEEEEE;
        }
        /*滑塊效果*/
        ::-webkit-scrollbar-thumb:hover
        {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 0px rgba(226,226,226,0.2);
        background: #E2E2E2;
        }
        </style>
        </head>
    <body id="content" style="background: #f8f9fb;">
        <script>

            //此函式為:向qt傳送訊號引數:a為當前檔案id唯一標識;aa為狀態:0-傳送離線檔案;1-取消;2-開啟資料夾;3-開啟檔案;4-接收;5-下載
            //測試函式
            function sendToRcv(a,aa){
                window.mywebkit.onHtmlCall(a,aa);
            }
             //圖片傳輸
            function sendToImg(i){
                window.mywebkit.onHtmlCallPic(i);
            }
            //絕密會話 e=id  0-拒絕;1-接受;
            function sendSecret(e,ee){
                window.mywebkit.onHtmlCallAcceptSecretChat(e,ee);
                document.getElementById(e).style.display="none";
            }
            //檔案傳輸
            function sendFile(c,cc){
                window.mywebkit.onHtmlCallFile(c,cc);
            }

            //閱後即焚
            var mySecret = new Array();

            function readAfter(sa,sb,sc){
                var mySecretLenght=mySecret.length;
                for(var i=0;i<mySecretLenght;i++)
                {
                   if(mySecret[i]==sa){
                    return;
                   }
                }
                mySecret.push(sa);
                document.getElementById(sc).style.display="block";
                var t9=setTimeout(function(){document.getElementById(sb).innerHTML='9'},2000);
                var t8=setTimeout(function(){document.getElementById(sb).innerHTML='8'},3000);
                var t7=setTimeout(function(){document.getElementById(sb).innerHTML='7'},4000);
                var t6=setTimeout(function(){document.getElementById(sb).innerHTML='6'},5000);
                var t5=setTimeout(function(){document.getElementById(sb).innerHTML='5'},6000);
                var t4=setTimeout(function(){document.getElementById(sb).innerHTML='4'},7000);
                var t3=setTimeout(function(){document.getElementById(sb).innerHTML='3'},8000);
                var t2=setTimeout(function(){document.getElementById(sb).innerHTML='2'},9000);
                var t1=setTimeout(function(){document.getElementById(sb).innerHTML='1'},10000);
                var t0=setTimeout(function(){document.getElementById(sb).innerHTML='0'},11000);
                var t11=setTimeout(function(){document.getElementById(sa).style.display='none'},12000);
                clearTimeout();
            }
        </script>
    </body>
</html>

1.其中style為自定義滾動條的樣式。

2.body中的id是動態寫入的id,稍後會使用

id="content"

3.<script>內為與qt互動的函式,主要為響應一些點選事件等。以一個函式為例

電腦
function sendToRcv(a,aa){                                  //函式名稱,在html中點選呼叫
            window.mywebkit.onHtmlCall(a,aa);          //此為qt與html互動函式,兩個引數a代表id唯一標識;aa為狀態,根據此狀態做相應處理
}

二、qt中主要與html互動的標頭檔案和原始檔,首先看標頭檔案

#ifndef QCHATINFOEDIT
#define QCHATINFOEDIT

#include <QObject>
#include <QWidget>
#include "custom/basewidget.h"
#include "widgets/msg.h"
#include <QMap>
#include <QWebView>
#include "custom/loginerrwdg.h"

class QTimer;

class WebView:public QWebView
{
    Q_OBJECT
public:
    WebView(QWidget *parent=0)
        :QWebView(parent)
    {

    }
    virtual ~WebView(){}
signals:
    void getMoreMsg();
protected:
    //void enterEvent(QEvent *event);

     void wheelEvent(QWheelEvent *event);

};
class QChatInfoEdit : public QBaseWidget
{
    Q_OBJECT
public:
    QChatInfoEdit(QWidget *parent=0);
    virtual ~QChatInfoEdit();
public:
    void showSendMsg(Msg* msg, bool bStatus=true);
    void showRcvMsg(Msg* msg, bool bStatus=true);
    // 清屏,不需要向上
    void clearScreen();
    void setRcv(QString username);
    // 清除 msg 對映,不需要向上
    void clearMapData();

    //顯示時間
    void showTime(QString strTime,bool bStatus=true);
    //顯示檢視更多訊息,不需要向上
    void showMore();
    //顯示檢視更多訊息load,不需要向上
    void showLoad();
    void removeLoad();

    QString rcvPic(QString id,QString picPath, bool bLeft,bool bStatus, bool bNetWork=true, QString username="");
    // 顯示絕密通知
    QString showSecretNotify(QString picPath,  QString contentMsg,bool bStatus);
    // 顯示通知
    void showNotify(QString picPath,QString contentMsg,bool bStatus);
    //沒有圖示
    void showNotify(QString contentMsg,bool bStatus);
    // 撤銷掉之前的顯示,不需要向上
    void revokeInfoTip(QString strId);
    // 顯示按鈕,不需要向上
    void addInfoTip(QString strId);
    // 更換佔位圖,不需要向上
    void updatePic(QString strId, QString picPath);
    // 檔案收發
    QString showSendFile(QString fName,QString fSize,int nProcess,QString fId,bool bStatus);
    QString showRcvFile(QString fName,QString fSize,int nProcess,QString fId,bool bStatus,QString username="");
    // 絕密會話建立
    QString secretChatCreate(QString id, int state, QString text,bool bStatus,bool bSelf=false);
    QString SecretMsg(QString text, bool bSelf,bool bStatus);
    void msgScroll(bool bStatus);
//protected:
//    void enterEvent(QEvent *event);

//     void wheelEvent(QWheelEvent *event);
signals:
    void getMoreMsg();
public slots:
    // 更新進度條
    void updateProcess(Msg *msg);
    // 上傳或下載錯誤
    void fileTransferFaile(Msg *msg, bool bStatus=true);
    // 檔案或者影象傳輸完畢
    void fileTransferFinished(Msg *msg);
public slots: //必須宣告為公有的槽函式,才能在html中被呼叫,以下函式在html中呼叫
    // 點選縮圖獲取原圖
    void onHtmlCallPic(QString strPic);
    // 響應絕密會話
    void onHtmlCallAcceptSecretChat(QString id, QString strResult);
    // 接收檔案
    void onHtmlCallFile(QString strArvTime, QString strOption);
private slots:
    // 向html註冊呼叫名稱
    void onNotifyAddWindowsObjectToHtml();
private:
    // 生成html語句,群組聊天顯示聯絡人名稱
    QString mucMemMsgName(QString name);
public:
    QWebView *m_wviwChat;
private:

    LoginErrWdg ErrWdg;
    QMap<QString, Msg*> m_data;
    QString m_strPathRcv;
    QString m_strPathSend;
    bool m_bMucMem;
};

#endif // QCHATINFOEDIT

二、qt中主要與html互動的標頭檔案和原始檔,首先看原始檔

#include "qchatinfoedit.h"
#include <QWebView>
#include <QFile>
#include <QWebFrame>
#include "common/constants.h"
#include "common/emotiondef.h"
#include <QHBoxLayout>
#include <qdebug.h>
#include "log4qt/logrecord.h"
#include "ftpmgr/filemgr.h"
#include "widgets/department.h"
#include "topsecretmgr/topsecretmgr.h"
#include "common/gdfun.h"

extern QString gs_user;
extern QString gs_dns_str;

QChatInfoEdit::QChatInfoEdit(QWidget *parent) : QBaseWidget(parent)
{
    m_wviwChat = new WebView(this);
    m_borderSize = 1;

    setBkCol(QColor("#f8f9fb"), QColor("#f8f9fb"));
    setPainterSide(false,true,false,false);
    m_wviwChat->settings()->setAttribute(QWebSettings::PluginsEnabled,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::JavaEnabled,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::JavascriptEnabled,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::JavascriptCanOpenWindows,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::JavascriptCanAccessClipboard,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::SpatialNavigationEnabled,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::LinksIncludedInFocusChain,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::AcceleratedCompositingEnabled,true);
    m_wviwChat->settings()->setAttribute(QWebSettings::AutoLoadImages,true);
    //m_wviwChat->settings()->setAttribute(QWebSettings::TiledBackingStoreEnabled,true);

    m_wviwChat->page()->setForwardUnsupportedContent(true);
    m_wviwChat->setContextMenuPolicy (Qt::NoContextMenu);

    connect(m_wviwChat->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
            this, SLOT(onNotifyAddWindowsObjectToHtml()));

    connect(m_wviwChat, SIGNAL(getMoreMsg()),
            this, SIGNAL(getMoreMsg()));


    QFile source(":/style-new.html");
    source.open(QIODevice::ReadOnly);
    m_wviwChat->setHtml(QString::fromUtf8(source.readAll().constData()));
    source.close();
    QHBoxLayout *mainlayout = new QHBoxLayout(this);
    mainlayout->addWidget(m_wviwChat);
    this->setLayout(mainlayout);
    m_data.clear();
    //m_wviwChat->setFixedSize(this->size());
}

QChatInfoEdit::~QChatInfoEdit()
{
    m_wviwChat->stop();
    m_wviwChat->close();
    m_wviwChat->deleteLater();
    _DELEOBJECT(m_wviwChat)
}

void WebView::wheelEvent(QWheelEvent *event)
{
    int j  = this->page()->mainFrame()->scrollBarValue(Qt::Vertical);

    if(event->orientation()==Qt::Vertical&&event->delta()>0)
        if( this->page()->mainFrame()->scrollBarMinimum(Qt::Vertical)==this->page()->mainFrame()->scrollBarValue(Qt::Vertical))
        {
            emit getMoreMsg();
        }

    QWebView::wheelEvent(event);

}

void QChatInfoEdit::showSendMsg(Msg* msg, bool bStatus)
{
    if (NULL == msg)
    {
        WriteLog("傳送端收到空訊息");
        return;
    }

    QString html = QString("");
    do
    {
        // 如果是文字訊息
        if (Msg::MsgType::text == msg->m_type)
        {
            QString netStatus = (TextMsgState::NetNormal == msg->m_state) ? "none" : "block";

            QString chat = msg->content();
            chat.replace("&", "&");
            chat.replace("\"", """);
            chat.replace(">", ">");
            chat.replace("<", "<");
            chat.replace("\\", "\\\\");
            chat.replace("\n", "<br//>");
            chat.replace(" ", " ");
            QString strChat = EmotionDef::getInstance()->defToFormat(chat);

            html.append(QString("document.getElementById(\"content\").insertAdjacentHTML(\"%4\",\""
                                "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height:21px;font-size: 13px; color:#232323;'>"
                                    "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                                        "<img src='file:///%2' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px; float:right;'>"
                                        "<div style='float: right;position: relative; margin-right: 5px;padding: 6px 13px; max-width:50%; min-height: 21px; border-radius: 5px; border: 1px solid #9ee45f; background-color: #9ee45f;'>"
                                            "<div style='position:absolute;right:-16px;top:10px;width:0;height:0;font-size:0;border:solid 8px;border-color:transparent transparent transparent #9ee45f;'>"
                                                "<div style='position:absolute;right:-6px;top:-7px;width:0;height:0;font-size:0;border:solid 7px;border-color:transparent transparent transparent #9ee45f;'></div>"
                                            "</div>"
                                            "<span style='line-height:21px;word-break:break-all;font-size: 13px;color:#232323;'>%1</span>"
                                            "<div style='display:%3;position:absolute;left:-41px;bottom:6px;width:26px;height:22px;border-radius:50%;background-color:#ff5b5b;text-align:center;color:#fff;padding-top:4px;'>!</div>"
                                        "</div>"
                                    "</div>"
                                "</div>\")")
                        .arg(strChat)
                        .arg(m_strPathSend)
                        .arg(netStatus)
                        .arg(bStatus ? "beforeEnd" : "afterBegin"));
            break;
        }

        if (Msg::MsgType::file == msg->m_type)
        {
            FileMsg *file = NULL;
            file = dynamic_cast<FileMsg *>(msg);
            if (NULL != file && (FileState::Uploading == file->m_state ||  FileState::UploadFinished == file->m_state))
            {
                WriteLog(QString("showsendmsg %1").arg(file->m_state));
                html = showSendFile(file->m_fileName,
                                    file->getSize(),
                                    FileState::UploadFinished == file->m_state ? 100 : 0,
                                    QString::number((int)msg),
                                    bStatus);
            }       
            else if (NULL != file && (FileState::UploadCancle == file->m_state))
            {
                // 取消檔案傳送
                showNotify(FILE_TRANSFER_CANCEL, file->errorDescription(),bStatus);
            }
            else
            {
                // 檔案傳送過程中產生錯誤
                showNotify(FILE_TRANSFER_FAILE, file->errorDescription(),bStatus);

            }
            break;
        }

        if (Msg::MsgType::image == msg->m_type)
        {
            ImageMsg *img = NULL;
            img = dynamic_cast<ImageMsg *>(msg);
            if (NULL != img && FileState::UploadSpace == img->m_state)//+ "/" + img->m_strFileName
                html = rcvPic(QString::number((int)msg),img->m_localThumbPath, false, bStatus, true);
            else if(NULL != img && FileState::UploadMin == img->m_state)
                showNotify(FILE_TRANSFER_CANCEL, img->errorDescription(),bStatus);
            else if(NULL != img && FileState::NetImgError == img->m_state)
                html = rcvPic(QString::number((int)msg),img->m_localThumbPath, false, bStatus, false);
            else
            {
                html = rcvPic(QString::number((int)msg), img->m_localThumbPath, false,bStatus, true);
            }
        }

        if (Msg::MsgType::secret == msg->m_type)
        {
            html = secretChatCreate(QString::number((int)msg), msg->m_state, msg->content(),bStatus, true);
            break;
        }

    }while (false);

    if (!html.isEmpty())
    {
        m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
        m_data[QString::number((int)msg)] = msg;
        msgScroll(bStatus);
    }
}

void QChatInfoEdit::showRcvMsg(Msg* msg, bool bStatus)
{
    if (NULL == msg)
    {
        WriteLog("接收端收到空訊息");
        return;
    }

    if(msg->m_groupMemberJID=="通知訊息")
    {
        this->showNotify(msg->content(),bStatus);
        msgScroll(bStatus);
        return;
    }

    m_bMucMem = false;
    if (!msg->m_groupMemberJID.isEmpty())
    {
        Employee* employee = OrgManager::instance()->findVcard(msg->m_groupMemberJID);

        if (NULL != employee)
            m_strPathRcv = employee->avatarPath();
        m_bMucMem = true;
    }

    QString html = QString("");
    do
    {
        if (Msg::MsgType::text == msg->m_type)
        {
            QString chat = msg->content();
            //chat.replace("\n", "<br>");
            chat.replace("&", "&");
            chat.replace("\"", """);
            chat.replace(">", ">");
            chat.replace("<", "<");
            chat.replace("\\", "\\\\");
            chat.replace("\n", "<br//>");
            chat.replace(" ", " ");
            QString strChat = EmotionDef::getInstance()->defToFormat(chat);

            html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"%4\",\""
                           "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 13px;color:#232323;'>"
                                   "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                                       "<img src='file:///%2' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px; float:left;'>"
                                       "%3"
                                       "<div style='float: left;position: relative; margin-left: 5px;padding: 6px 13px; max-width:50%; min-height: 21px; border-radius: 5px; border: 1px solid #ddd;background-color:#fff;'>"
                                           "<div style='position:absolute;top:10px;left:-16px;width:0;height:0;font-size:0;border:solid 8px;border-color:transparent #ddd transparent transparent;'>"
                                               "<div style='position:absolute;top:-7px;left:-6px;width:0;height:0;font-size:0;border:solid 7px;border-color:transparent #fff transparent transparent;'></div>"
                                           "</div>"
                                           "<span style='line-height:21px;word-break:break-all;font-size: 13px;color:#232323;'>%1</span>"
                                       "</div>"
                                   "</div>"
                           "</div>\")")
                    .arg(strChat)
                    .arg(m_strPathRcv)
                    .arg(mucMemMsgName(msg->m_groupMemberJID))
                    .arg(bStatus ? "beforeEnd" : "afterBegin");
            break;
        }

        if (Msg::MsgType::file == msg->m_type)
        {
            //WriteLog("showRcvMsg");
            FileMsg *file = NULL;
            file = dynamic_cast<FileMsg *>(msg);
            if (NULL != file && (FileState::Loading == file->m_state ||  FileState::LoadFinished == file->m_state))
            {
                WriteLog(QString("showRcvMsg %1").arg(file->m_state));
                html = showRcvFile(file->m_fileName,
                                    file->getSize(),
                                    FileState::LoadFinished == file->m_state ? 100 : 0,
                                    QString::number((int)msg),
                                    bStatus,
                                    msg->m_groupMemberJID
                                    );
            }

            else if (NULL != file && (FileState::LoadError == file->m_state))
            {
                // 檔案接收過程中出錯
                showNotify(FILE_TRANSFER_FAILE, file->errorDescription(),bStatus);

            }
            else if (NULL != file && (FileState::LoadCancle == file->m_state))
            {
                // 取消檔案接收
                showNotify(FILE_TRANSFER_CANCEL, file->errorDescription(),bStatus);
            }
            break;
        }

        if (Msg::MsgType::image == msg->m_type)
        {
            // 接收方在此處顯示影象分兩種情況,一種是縮圖下載完成,一種是縮圖還未下載;
            ImageMsg *img = NULL;
            img = dynamic_cast<ImageMsg *>(msg);
            if(img)
            {
                if (ImageMsg::ThumbRecving == img->m_state)
                {
                    QString path = QCoreApplication::applicationDirPath()+"/picture/zhangweitu.png";
                    html = rcvPic(QString::number((int)msg), path, true, bStatus, true,msg->m_groupMemberJID);
                    qDebug() << "rcvPic:" << html;
                }
                else if(ImageMsg::ThumbReplacePlaceholder == img->m_state)
                {
                     this->updatePic(QString::number((int)msg), img->m_localThumbPath);
                     img->m_state = ImageMsg::ThumbRecvFinished;
                     msg->updateState();
                     html="";
                }
                else
                {
                    QString path = "";
                    if( QFileInfo::exists(img->m_localThumbPath) )
                        path = img->m_localThumbPath;
                    else
                        path = QCoreApplication::applicationDirPath()+"/picture/unload.png";//檔案不存在要顯示的圖片路徑

                    html = rcvPic(QString::number((int)msg), path, true,bStatus, true,msg->m_groupMemberJID);
                }

            }

            break;
        }

        if (Msg::MsgType::secret == msg->m_type)
        {
            html = secretChatCreate(QString::number((int)msg), msg->m_state, msg->content(),bStatus,false);
            break;
        }
    } while(false);

    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
    m_data[QString::number((int)msg)] = msg;


    msgScroll(bStatus);
}

QString QChatInfoEdit::showSendFile(QString fName,QString fSize,int nProcess,QString fId,bool bStatus)
{
    QString html = QString("");
    html.append(QString("document.getElementById(\"content\").insertAdjacentHTML(\"%14\",\""
                        "<div id='%6' style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height:21px;font-size: 13px;color:#232323;'>"
                            "<div style='float:left;width:100%;padding-top:5px;padding-bottom:5px;margin-top:8px;margin-bottom:8px;'>"
                                "<img src='file:///%2' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px;float:right;'>"
                                "<div style='float:right;position:relative; margin-left: 5px;width:300px;min-height:25px;border-radius:5px;border:1px solid #9ee45e;background-color:#9ee45e;'>"
                                    "<div style='float:left;height:auto;border-radius:5px;margin:4px;border:0px solid #f2f2f2;background-color:#fff;padding:10px 14px;width:264px;'>"
                                        "<div style='position:absolute;right:-16px;top:10px;width:0;height:0;font-size:0;border:solid 8px;border-color:transparent transparent transparent #9ee45e;'>"
                                            "<div style='position:absolute;right:-6px;top:-7px;width:0;height:0;font-size:0;border:solid 7px;border-color:transparent transparent transparent #9ee45e;'></div>"
                                        "</div>"
                                        "<img src='%3' style='float:left;'>"
                                        "<div style='float:left;margin-left:10px;color:#333;width:80%;'>"
                                            "<div style='margin-top:-5px;'>"
                                                "<div style='font-size:16px;color:#000;width:130px;height:20px;padding-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;'>"
                                                    "%1"
                                                "</div>"
                                                "<div style='font-size:12px;color:#696969;display:inline-block;'>(%4)</div>"
                                            "</div>"
                                            "<div id='%10' style='display:%7;margin-top:5px;'>"
                                                "<div style='height: 4px;width: 100%;background-color:#f2f2f2;border-radius:2px;overflow:hidden;'>"
                                                     "<div id='%9' style='height:4px;background-color:#f4be00;border-radius:2px;width:%5;'></div>"
                                                "</div>"
                                            "</div>"
                                            "<div id='%11' style='display:%8;margin-top:5px;'>"
                                                "<div style='color:#696969; font-size: 12px;'>"
                                                     "成功傳送檔案"
                                                "</div>"
                                            "</div>"
                                        "</div>"
                                        "<div id='%12' style='display:%7;margin-top: 5px; margin-bottom: -4px; margin-left: -14px; margin-right: -15px; padding:5px 15px 0px 13px; width: 100%; text-align: right; font-size: 12px; float: left;'>"
                                            "<div style='margin-right:0px;padding-left:12px;text-decoration:none;color:#129611;background:none;border:none;outline:none;cursor:pointer;display:inline-block;' onclick='sendFile(%6,1)'>取消</div>"
                                        "</div>"
                                        "<div id='%13' style='display:%8;margin-top: 5px; margin-bottom: -4px; margin-left: -14px; margin-right: -15px; padding:5px 15px 0px 13px; width: 100%; text-align: right; font-size: 12px;border-top: 1px solid #ddd; float: left;'>"
                                            "<div style='margin-right:0px;padding-left:12px;text-decoration:none;color:#129611;background:none;border:none;outline:none;cursor:pointer;display:inline-block;' onclick='sendFile(%6,3)'>開啟</div>"
                                            "<div style='margin-right:0px;padding-left:12px;text-decoration:none;color:#129611;background:none;border:none;outline:none;cursor:pointer;display:inline-block;' onclick='sendFile(%6,2)'>開啟資料夾</div>"
                                        "</div>"
                                    "</div>"
                                "</div>"
                            "</div>"
                        "</div>\")")
                .arg(fName)
                .arg(m_strPathSend)
                .arg("qrc:/switchpic/file.png")
                .arg(fSize)
                .arg(nProcess)
                .arg(fId)
                .arg(100 == nProcess ? "none" : "block")
                .arg(100 == nProcess ? "block" : "none")
                .arg(fId+"01")
                .arg(fId+"02")
                .arg(fId+"03")
                .arg(fId+"04")
                .arg(fId+"05")
                .arg(bStatus ? "beforeEnd" : "afterBegin"));
   return html;
}

QString QChatInfoEdit::showRcvFile(QString fName,QString fSize,int nProcess,QString fId,bool bStatus,QString username)
{
    QString html("");
    html.append(QString("document.getElementById(\"content\").insertAdjacentHTML(\"%18\",\""
                        "<div id='%6' style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height:21px;font-size: 13px;color:#232323;'>"
                            "<div style='float:left;width:100%;padding-top:5px;padding-bottom:5px;margin-top:5px;margin-bottom:5px;'>"
                                "<img src='file:///%2' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px;float:left;'>"
                                "%17"
                                "<div style='float: left;position: relative; margin-left: 5px;width:300px;  min-height: 25px; border-radius: 5px; border: 1px solid #dddddd;background-color:#f2f2f2;'>"
                                    "<div style='float:left;height:auto;border-radius:5px;padding:4px;border:0px solid #f2f2f2;background-color:#fff;padding:10px 14px;width:272px;'>"
                                        "<div style='position:absolute;top:10px;left:-16px;width:0;height:0;font-size:0;border:solid 8px;border-color:transparent #ddd transparent transparent;'>"
                                            "<div style='position:absolute;top:-7px;left:-6px;width:0;height:0;font-size:0;border:solid 7px;border-color:transparent #ffffff transparent transparent;'></div>"
                                        "</div>"
                                        "<img src='%3' style='float:left;'>"
                                        "<div style='float:left;margin-left:10px;color:#333;width:80%;'>"
                                            "<div style='margin-top:-5px;'>"
                                                "<div style='font-size:16px;color:#000;width:130px;height:20px;padding-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;'>"
                                                    "%1"
                                                "</div>"
                                                "<div style='font-size:12px;color:#696969;display:inline-block;'>(%4)</div>"
                                            "</div>"
                                            "<div id='%11' style='display:%7;margin-top:5px;'>"
                                                "<div style='height: 4px;width: 100%;background-color:#f2f2f2;border-radius:2px;overflow:hidden;'>"
                                                     "<div id='%10' style='height:4px;background-color:#f4be00;border-radius:2px;width:%5%;'></div>"
                                                "</div>"
                                            "</div>"
                                            "<div id='%12' style='display:%8;margin-top:5px;'>"
                                                "<div style='color:#696969; font-size: 12px;'>"
                                                     "成功下載檔案"
                                                "</div>"
                                            "</div>"
                                        "</div>"
                                        "<div id='%13' style='display:%7;margin-top: 5px; margin-bottom: -4px; margin-left: -14px; margin-right: -15px; padding:5px 15px 0px 13px; width: 100%; text-align: right; font-size: 12px; float: left;'>"
                                            "<div id='%16' style='margin-right:0px;padding-left:12px;text-decoration:none;color:#129611;background:none;border:none;outline:none;cursor:pointer;display:none;' onclick='sendFile(%6,1)'>取消</div>"
                                            "<div id='%15' style='display:%9;margin-right:0px;padding-left:12px;text-decoration:none;color:#129611;background:none;border:none;outline:none;cursor:pointer;' onclick='sendFile(%6,5)'>下載</div>"
                                        "</div>"
                                        "<div id='%14' style='display:%8;margin-top: 5px; margin-bottom: -4px; margin-left: -14px; margin-right: -15px; padding:5px 15px 0px 13px; width: 100%; text-align: right; font-size: 12px;border-top: 1px solid #ddd; float: left;'>"
                                            "<div style='margin-right:0px;padding-left:12px;text-decoration:none;color:#129611;background:none;border:none;outline:none;cursor:pointer;display:inline-block;' onclick='sendFile(%6,3)'>開啟</div>"
                                            "<div style='margin-right:0px;padding-left:12px;text-decoration:none;color:#129611;background:none;border:none;outline:none;cursor:pointer;display:inline-block;' onclick='sendFile(%6,2)'>開啟資料夾</div>"
                                        "</div>"
                                    "</div>"
                                "</div>"
                            "</div>"
                        "</div>\")")
                .arg(fName)
                .arg(m_strPathRcv )
                .arg("qrc:/switchpic/file.png")
                .arg(fSize)
                .arg(nProcess)
                .arg(fId)
                .arg(100 == nProcess ? "none" : "block")
                .arg(100 == nProcess ? "block" : "none")
                .arg(0 == nProcess ? "inline-block" : "none")
                .arg(fId+"01")
                .arg(fId+"02")
                .arg(fId+"03")
                .arg(fId+"04")
                .arg(fId+"05")
                .arg(fId+"06")
                .arg(fId+"07")
                .arg(mucMemMsgName(username))
                .arg(bStatus ? "beforeEnd" : "afterBegin"));
    return html;
}

QString QChatInfoEdit::secretChatCreate(QString id, int state, QString text,bool bStatus, bool bSelf)
{
    QString html;
    switch (state)
    {
    case SecretState::Create :
        html =showSecretNotify(SECRET_KEY_PNG, "你發起了加密會話,正在等待對方接受",bStatus);
        break;
    case SecretState::SecretNetError:
        html =showSecretNotify(FILE_TRANSFER_FAILE, "伺服器連線異常",bStatus);
        break;
    case SecretState::AleadyCreated:
        html =showSecretNotify(SECRET_KEY_PNG, "加密會話已建立",bStatus);
        break;
    case SecretState::IsCreating:
        html =showSecretNotify(SECRET_KEY_PNG, "對方已發起了加密會話",bStatus);
        break;
    case SecretState::SendNoReply:
        html =showSecretNotify(SECRET_KEY_PNG, "加密會話已經斷開,訊息未傳送成功",bStatus);
        break;
    case SecretState::RcvNoReply:
        html =showSecretNotify(SECRET_KEY_PNG, "加密會話已結束",bStatus);
        break;
    case SecretState::DataIntegrity:
        html =showSecretNotify(SECRET_KEY_PNG, "收到了多條無法驗證的訊息,建議重新建立加密會話",bStatus);
        break;
    case SecretState::AlreadyDisconnect:
        html =showSecretNotify(SECRET_KEY_PNG, "加密會話已結束",bStatus);
        break;
    case SecretState::TimeOut:
        html =showSecretNotify(SECRET_KEY_PNG, "加密會話已超時",bStatus);
        break;
    case SecretState::Reject:
        html =showSecretNotify(SECRET_KEY_PNG, "對方拒絕了你發起的加密會話",bStatus);
        break;
    case SecretState::Refuse:
        html =showSecretNotify(SECRET_KEY_PNG, "你拒絕了對方發起的加密會話",bStatus);
        break;
    case SecretState::Text:
        html = SecretMsg(text, bSelf,bStatus);
        break;
    case SecretState::RcvOrReject:
        html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"%3\",\""
                       "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 13px;color:#232323;'>"
                            "<div id='%2' style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                               "<div style='font-size: 12px;position: relative; left: 28%;padding: 6px 15px; width: 40%; min-height: 21px; border-radius: 5px; border: 1px solid #f2f2f2; background-color: #f2f2f2;color:#696969;text-align: center;'>"
                                   "<div style='color:#129611;'> <img src='file:///%1' style='margin-right: 5px;'> 對方發起了加密會話,是否接受?</div>"
                                   "<div>"
                                       "<input type='button' name='secret' onclick='sendSecret(%2,0)' value='拒絕' style='padding: 5px 15px; margin: 10px 5px; border-radius: 3px; border: none; background-color: #aaa; color: #fff; outline: none; cursor: pointer;'/>"
                                       "<input type='button' name='secret' onclick='sendSecret(%2,1)' value='接受' style='padding: 5px 15px; margin: 10px 5px; border-radius: 3px; border: none; background-color: #129611;color: #fff; outline: none; cursor: pointer;'/>"
                                   "</div>"
                               "</div>"
                           "</div>"
                       "</div>\")")
                .arg(SECRET_KEY_PNG)
                .arg(id)
                .arg(bStatus ? "beforeEnd" : "afterBegin");
        break;
    case SecretState::AlreadyRcvOrReject:
        html = showSecretNotify(SECRET_KEY_PNG, "對方接受了你發起的加密會話",bStatus);;
        break;
    }
    return html;
}

QString QChatInfoEdit::SecretMsg(QString text, bool bSelf,bool bStatus)
{
    QString html;
    //chat.replace("\n", "<br>");
    text.replace("&", "&");
    text.replace("\"", """);
    text.replace(">", ">");
    text.replace("<", "<");
    text.replace("\\", "\\\\");
    text.replace("\n", "<br//>");
    text.replace(" ", " ");
    QString chat = EmotionDef::getInstance()->defToFormat(text);

    if (bSelf)
    {
       html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"%4\",\""
                           "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 13px;color:#232323;'>"
                                        "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                                           "<img src='file:///%1' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px; float:right;'>"
                                           "<div style='float: right;position: relative; margin-right: 5px;padding: 5px 13px; max-width:50%; min-height: 21px; border-radius: 5px; border: 1px solid #9ee45e; background-color: #9ee45e;'>"
                                               "<div style='position:absolute;right:-16px;top:10px;width:0;height:0;font-size:0;border:solid 8px;border-color:transparent transparent transparent #9ee45e;'>"
                                                   "<div style='position:absolute;right:-6px;top:-7px;width:0;height:0;font-size:0;border:solid 7px;border-color:transparent transparent transparent #9ee45e;'>"
                                                   "</div>"
                                               "</div>"
                                               "<div style='width: 25px; height: 25px;border-radius: 50%; background-color: #ffffff; border:1px solid #129611; position: absolute; left: -11px; top: -11px;z-index: 11;'>"
                                                   "<img style='margin: 4px 7px;' src='file:///%2'/>"
                                               "</div>"
                                               "<span style='font-size: 13px;color:#232323;line-height:21px;word-break:break-all;'>%3</span>"
                                           "</div>"
                                       "</div>"
                           "</div>\")")
                    .arg(m_strPathSend)
                    .arg(SECRET_KEY_PNG)
                    .arg(chat)
                    .arg(bStatus ? "beforeEnd" : "afterBegin");
    }
    else
    {

        html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"beforeEnd\",\""
                       "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 13px;color:#232323;'>"
                                    "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                                       "<img src='file:///%1' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px; float:left;'>"
                                       "<div style='float: left;position: relative; margin-right: 5px;padding: 5px 13px; max-width:50%; min-height: 21px; border-radius: 5px; border: 1px solid #ddd;background-color:#ffffff;'>"
                                           "<div style='position:absolute;top:10px;left:-16px;width:0;height:0;font-size:0;border:solid 8px;border-color:transparent #ddd transparent transparent;'>"
                                               "<div style='position:absolute;top:-7px;left:-6px;width:0;height:0;font-size:0;border:solid 7px;border-color:transparent #ffffff transparent transparent;'>"
                                               "</div>"
                                           "</div>"
                                           "<div style='width: 25px; height: 25px;border-radius: 50%; background-color: #ffffff; border:1px solid #129611; position: absolute; right: -11px; top: -11px;z-index: 11;'>"
                                               "<img style='margin: 4px 7px;' src='file:///%2'/>"
                                           "</div>"
                                           "<span style='line-height:25px;word-break:break-all;'>%3</span>"
                                       "</div>"
                                   "</div>"
                       "</div>\")")
                .arg(m_strPathRcv)
                .arg(SECRET_KEY_PNG)
                .arg(chat);
    }

    return html;

}

void QChatInfoEdit::updateProcess(Msg *msg)
{
    QString html("");
    do
    {
        FileMsg *file = NULL;
        file = dynamic_cast<FileMsg *>(msg);
        if (NULL != file)
        {
            //進度條更新
            if ((0 < file->m_progress < 100) && !file->isSelf())
            {
                //接收方“下載”後按鈕消失
                html = QString("javascript:document.getElementById('%1').style.display='none'")
                        .arg(QString::number((int)msg) + "06");
                m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
                //break;
            }

            //WriteLog("updateProcess: file is NULL");
            html = QString("javascript:document.getElementById('%1').style.width='%2%'")
                       .arg(QString::number((int)msg) + "01")
                       .arg(file->m_progress);



            if (100 == file->m_progress )
            {
                //當接收或傳送成功後顯示開啟開啟資料夾
                html = QString("javascript:document.getElementById('%1').style.display='none'")
                        .arg(QString::number((int)msg) + "02");
                m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
                html = QString("javascript:document.getElementById('%1').style.display='none'")
                        .arg(QString::number((int)msg) + "04");
                m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
                html = QString("javascript:document.getElementById('%1').style.display='block'")
                        .arg(QString::number((int)msg) + "03");
                m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
                html = QString("javascript:document.getElementById('%1').style.display='block'")
                        .arg(QString::number((int)msg) + "05");
            }


            break;
        }
    } while(false);

    if (!html.isEmpty())
    {
        WriteLog(html);
        m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
    }
}

void QChatInfoEdit::fileTransferFaile(Msg *msg, bool bStatus)
{
    if (msg->m_type == Msg::MsgType::image)
    {
        addInfoTip(QString::number((int)msg) + "01");
        showNotify(FILE_TRANSFER_FAILE, msg->errorDescription(),bStatus);
    }
    else
    {
        revokeInfoTip(QString::number((int)msg));
        showNotify(FILE_TRANSFER_FAILE, msg->errorDescription(),bStatus);
    }
}

void QChatInfoEdit::fileTransferFinished(Msg *msg)
{
    QString html("");
    do
    {
        if (NULL == msg)
        {
            WriteLog("fileTransferFinished: msg is NULL");
            break;
        }

        ImageMsg *img = NULL;
        img = dynamic_cast<ImageMsg *>(msg);
        if (NULL == img)
        {
            // 替換掉原有的佔位影象
            WriteLog("fileTransferFinished: file is NULL");
            break;
        }
        html = QString();
    } while(false);

    if (!html.isEmpty())
    {
        m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
    }
}

//絕密會話訊息
QString QChatInfoEdit::showSecretNotify(QString picPath,  QString contentMsg, bool bStatus)
{
    QString html("");
    html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"%3\",\""
                   "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 13px;color:#232323;'>"
                           "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                               "<div style='font-size: 13px;position: relative; left: 28%;padding: 10px 15px; width: 40%; min-height: 21px; border-radius: 5px; border: 1px solid #f2f2f2; background-color: #f2f2f2;color:#129611; text-align: center; word-break:break-all;'>"
                                   "<img src='file:///%1' style='margin-right: 5px;'/>%2"
                               "</div>"
                           "</div>"
                   "</div>\")")
            .arg(picPath)
            .arg(contentMsg)
            .arg(bStatus ? "beforeEnd" : "afterBegin");
    //m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
    //msgScroll(bStatus);
    return html;
}

void QChatInfoEdit::showNotify(QString picPath,  QString contentMsg, bool bStatus)
{
    QString html("");
    html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"%3\",\""
                   "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 13px;color:#232323;'>"
                           "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                               "<div style='font-size: 13px;position: relative; left: 28%;padding: 10px 15px; width: 40%; min-height: 21px; border-radius: 5px; border: 1px solid #f2f2f2; background-color: #f2f2f2;color:#696969;text-align: center; word-break:break-all;'>"
                                   "<img src='file:///%1' style='margin-right: 5px;'/>%2"
                               "</div>"
                           "</div>"
                   "</div>\")")
            .arg(picPath)
            .arg(contentMsg)
            .arg(bStatus ? "beforeEnd" : "afterBegin");
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
    msgScroll(bStatus);
}

void QChatInfoEdit::showNotify(QString contentMsg, bool bStatus)
{
    QString html("");
    html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"%2\",\""
                   "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 12px;color:#232323;'>"
                           "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                               "<div style='font-size: 13px;position: relative; left: 28%;padding: 10px 15px; width: 40%; min-height: 21px; border-radius: 5px; border: 1px solid #f2f2f2; background-color: #f2f2f2;color:#696969;text-align: center; word-break:break-all;'>"
                                   "%1"
                               "</div>"
                           "</div>"
                   "</div>\")")
            .arg(contentMsg)
            .arg(bStatus ? "beforeEnd" : "afterBegin");
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
    msgScroll(bStatus);
}

void QChatInfoEdit::updatePic(QString strId, QString picPath)
{
    QString html("");
    html =  QString("document.getElementById(%1).src='file:///%2';")
            .arg(strId)
            .arg(picPath);
   // qDebug() << "updatePic:" << html;
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
    msgScroll(true);
}

void QChatInfoEdit::revokeInfoTip(QString strId)
{
    QString html("");
    html =  QString("document.getElementById(%1).style.display='none';")
            .arg(strId);
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}

void QChatInfoEdit::addInfoTip(QString strId)
{
    QString html("");
    html =  QString("document.getElementById(%1).style.display='inline-block';")
            .arg(strId);
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}

void QChatInfoEdit::showTime(QString strTime, bool bStatus)
{
    QString html("");
    html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"%2\",\""
                   "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 13px;color:#232323;'>"
                           "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                               "<div style='text-align: center;font-size: 12px; color: #898989;'>"
                                   "%1"
                               "</div>"
                           "</div>"
                   "</div>\")")
            .arg(strTime)
            .arg(bStatus ? "beforeEnd" : "afterBegin");
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}

void QChatInfoEdit::showMore()
{
    QString html("");
    html = QString("document.getElementById(\"content\").insertAdjacentHTML(\"afterBegin\",\""
                   "<div id='moreMsg' name='moreMsg' style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 12px;'>"
                           "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;text-align: center;'>"
                               "<a style='font-size: 12px; color: #2c91ff;'>"
                                   "檢視更多訊息"
                               "</a>"
                           "</div>"
                   "</div>\")");
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}

void QChatInfoEdit::showLoad()
{
    QString html("");
    html = QString("var nodeMore = document.getElementById(\"moreMsg\");"
                   "nodeMore.parentNode.removeChild(nodeMore);"
                   "document.getElementById(\"content\").insertAdjacentHTML(\"afterBegin\",\""
                   "<div id='moreId' style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height: 21px;font-size: 12px;'>"
                           "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;text-align: center;'>"
                               "<img src='file:///%1' />"
                           "</div>"
                   "</div>\")")
            .arg(LOAD_HISTORY_INFO);
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}
void QChatInfoEdit::removeLoad()
{
    QString html("");
    html = QString("document.getElementById(\"moreId\").style.display='none';");
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}


QString QChatInfoEdit::rcvPic(QString id, QString picPath, bool bLeft, bool bStatus, bool bNetWork, QString username)
{
    QString html = QString("");
    QString strDirec = bLeft ? "left" : "right";

    QString path = "";
    if( QFileInfo::exists(picPath) )
        path = picPath;
    else
        path = QCoreApplication::applicationDirPath()+"/picture/unload.png";//檔案不存在要顯示的圖片路徑


    html.append(QString("document.getElementById(\"content\").insertAdjacentHTML(\"%9\",\""
                        "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height:21px;font-size: 13px;color:#232323;'>"
                            "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                                "<img src='file:///%3' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px; float:%1;'>"
                                "%8"
                                "<div style='border: 0px solid #f8f9fb;position: relative; margin-left: 5px;padding: 0px; max-width:50%;max-height:100%; min-height: 21px; border-radius: 5px;float:%1;'>"
                                    "<img id='%5' style='max-width:100%;max-height:100%;border-radius:5px;' src='file:///%2' ondblclick='sendToImg(%5)'>"
                                    "<div id='%6' style='display:%7;position:absolute;%4:-41px;bottom:6px;width:26px;height:22px;border-radius:50%;background-color:#ff5b5b;text-align:center;color:#fff;padding-top:4px;'>!</div>"
                                "</div>"
                            "</div>"
                        "</div>\")")
                .arg(strDirec)
                .arg(path)
                .arg(bLeft ? m_strPathRcv : m_strPathSend)
                .arg(bLeft ? "right" : "left")
                .arg(id)
                .arg(id + "01")
                .arg(bNetWork ? "none" : "block")
                .arg(mucMemMsgName(username))
                .arg(bStatus ? "beforeEnd" : "afterBegin"));
    return html;
}

void QChatInfoEdit::clearScreen()
{
    QString html("");
    html = QString("document.getElementById(\"content\").innerHTML = \"\"");
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}

void QChatInfoEdit::setRcv(QString username)
{
    Employee* obj = OrgManager::instance()->findVcard(username);
    if (NULL != obj)
    {
        m_strPathRcv = obj->avatarPath();
    }
    else
    {
        m_strPathRcv = DEFAULT_AVATAR_PNG;
    }

    obj = NULL;
    obj = OrgManager::instance()->findVcard(gs_user);
    if (NULL != obj)
    {
        m_strPathSend = obj->avatarPath();
    }
    else
    {
        m_strPathSend = DEFAULT_AVATAR_PNG;
    }
}

void QChatInfoEdit::clearMapData()
{
    m_data.clear();
}

void QChatInfoEdit::onHtmlCallPic(QString strPic)
{
    qDebug() << "onHtmlCallPic:" << strPic;
    do
    {
        if (!m_data.contains(strPic))
        {
            WriteLog("pic is not find!");
            break;
        }
        ImageMsg *img = NULL;
        img = dynamic_cast<ImageMsg *>(m_data[strPic]);
        //1-取消;2-開啟資料夾;3-開啟檔案;4-接收;5-下載
        if(!img)
            return;
        QString path = "";
        if(img->m_state == ImageMsg::ThumbRecvFinished)
        {
            QFileInfo info(img->m_localThumbPath);
            if(info.size()>500*1024)
            {
                img->m_state = ImageMsg::OriginalImageRecving;
                FileMgr::getInstance()->downloadFile(img);
                return;
            }
            else
            {
                path = img->m_localThumbPath;
            }
        }
        else
        {
            path = img->m_localOriginalPath;
        }

        if( QFileInfo::exists(path) )
        {
            qDebug() << "路徑:" << path;
            WriteLog("開啟圖片:" + path) ;
            ShellExecuteW(NULL,QString("open").toStdWString().c_str(),path.toStdWString().c_str(),NULL,NULL,SW_SHOW);
        }
        else
        {
            ErrWdg.setErrText("該檔案不存在,可能被刪或移動。", "錯誤");
            ErrWdg.setWindowModality(Qt::WindowModal);
            ErrWdg.show();
        }


    } while(false);
}

void QChatInfoEdit::onHtmlCallAcceptSecretChat(QString id, QString strResult)
{
    qDebug() << "onHtmlCallAcceptSecretChat:" << id << strResult;
    //Q_UNUSED(strResult)
    TextMsg *text = NULL;
    text = dynamic_cast<TextMsg *>(m_data[id]);
    int nResult = strResult.toInt();
    if (text != NULL)
    {
        text->m_state = SecretState::Close;
        text->updateState();
        qDebug() << "save" << text->m_state << text->m_userName;
        QTopSecretMgr::getInstance()->onNotifyOtherSideInitSecret(text->m_userName, nResult==0 ? false : true);
    }
}

void QChatInfoEdit::onHtmlCallFile(QString strArvTime, QString strOption)
{
    qDebug() << "onHtmlCallFile:" << strArvTime << strOption;
    do
    {
        if (!m_data.contains(strArvTime))
        {
            WriteLog("msg is not find!");
            break;
        }
        FileMsg *file = NULL;
        file = dynamic_cast<FileMsg *>(m_data[strArvTime]);
        //1-取消;2-開啟資料夾;3-開啟檔案;4-接收;5-下載
        if (NULL == file)
        {
            WriteLog("file struct is not find!");
            break;
        }

        if ("1" == strOption)
        {
            revokeInfoTip(strArvTime);
            if (file->m_self)
            {
                file->m_state = FileState::UploadCancle;
            }
            else
            {
                file->m_state = FileState::LoadCancle;
            }
            showNotify(FILE_TRANSFER_CANCEL, file->errorDescription(),true);
            FileMgr::getInstance()->cancleFileTransfer(file);
        }
        else if ("2" == strOption)
        {
            QString path = /*"/select," + */file->m_localPath + "/" + file->m_fileName;

            if( QFileInfo::exists(path) )
            {

                WriteLog("開啟資料夾:" + file->m_localPath) ;

                WriteLog(path);

                GdFileLocateFileW(path.toStdWString().c_str());
            }
            else
            {
               // GdFileLocateFileW(path.toStdWString().c_str());
                ErrWdg.setErrText("該檔案不存在,可能被刪或移動。", "錯誤");
                ErrWdg.setWindowModality(Qt::WindowModal);

                ErrWdg.show();
            }

        }
        else if ("3" == strOption)
        {
            // explorer 只能在windows下使用
            if( QFileInfo::exists(file->m_localPath+"/"+file->m_fileName) )
            {

                QString path = file->m_localPath+"/"+file->m_fileName;
                WriteLog("開啟檔案:" + path);

                ShellExecuteW(NULL,QString("open").toStdWString().c_str(),path.toStdWString().c_str(),NULL,NULL,SW_SHOW);
            }
            else
            {
                //LoginErrWdg* w = new LoginErrWdg;
                ErrWdg.setErrText("該檔案不存在,可能被刪或移動。", "錯誤");
                ErrWdg.setWindowModality(Qt::WindowModal);
                ErrWdg.show();
            }
        }
        else if ("5" == strOption)
        {
            revokeInfoTip(QString::number((int)file) + "06");
            addInfoTip(QString::number((int)file) + "07");
            FileMgr::getInstance()->downloadFile(file);
        }

    } while(false);

}

void QChatInfoEdit::onNotifyAddWindowsObjectToHtml()
{
    m_wviwChat->page()->mainFrame()->addToJavaScriptWindowObject(QString("mywebkit"), this);
}

void QChatInfoEdit::msgScroll(bool bStatus)
{
    QString html("");
    if(bStatus){
        html = QString("document.getElementById(\"content\").scrollTop = 10000000000;"
                   "var st1 = setTimeout(function(){document.getElementById(\"content\").scrollTop = 10000000000},500);"
                   "var st2 = setTimeout(function(){document.getElementById(\"content\").scrollTop = 10000000000},1000);");
    }
    m_wviwChat->page()->mainFrame()->evaluateJavaScript(html);
}

QString QChatInfoEdit::mucMemMsgName(QString name)
{
    QString html;
    html.clear();
    if (m_bMucMem)
    {
        Employee* employee = OrgManager::instance()->findVcard(name);
        QString strName = (NULL != employee) ? employee->m_neckName : name;
        html = QString("<div style='display:block;color: #aaa; font-size: 12px;height:22px; width:50%; margin-left:93px;'>%1</div>")
                .arg(strName);
    }
    return html;
}

動態寫入html的過程

 html.append(QString("document.getElementById(\"content\").insertAdjacentHTML(\"%9\",\""
                        "<div style='overflow:hidden;font-family:microsoft yahei ui,microsoft yahei;line-height:21px;font-size: 13px;color:#232323;'>"
                            "<div style='float: left;width: 100%; padding-top: 5px;padding-bottom: 5px; margin-top: 5px; margin-bottom: 5px;'>"
                                "<img src='file:///%3' style='width:46px;height:46px;border-radius:50%;border:1px solid #f2f2f2;overflow: hidden;margin-left: 20px; margin-right: 20px; float:%1;'>"
                                "%8"
                                "<div style='border: 0px solid #f8f9fb;position: relative; margin-left: 5px;padding: 0px; max-width:50%;max-height:100%; min-height: 21px; border-radius: 5px;float:%1;'>"
                                    "<img id='%5' style='max-width:100%;max-height:100%;border-radius:5px;' src='file:///%2' ondblclick='sendToImg(%5)'>"
                                    "<div id='%6' style='display:%7;position:absolute;%4:-41px;bottom:6px;width:26px;height:22px;border-radius:50%;background-color:#ff5b5b;text-align:center;color:#fff;padding-top:4px;'>!</div>"
                                "</div>"
                            "</div>"
                        "</div>\")")
                .arg(strDirec)
                .arg(path)
                .arg(bLeft ? m_strPathRcv : m_strPathSend)
                .arg(bLeft ? "right" : "left")
                .arg(id)
                .arg(id + "01")
                .arg(bNetWork ? "none" : "block")
                .arg(mucMemMsgName(username))
                .arg(bStatus ? "beforeEnd" : "afterBegin"));
    return html;
html.append()類似jquery的append

document.getElementById('content').insertAdjacentHTML('beforeEnd',''")
在end之前,也就是在最後插入

document.getElementById('content').insertAdjacentHTML('afterBegin',''")
在begin之後,也就是在最開始插入

四、以檔案收發為例,qt與html互動的過程

//檔案傳輸 html中的函式

 function sendFile(c,cc){
      window.mywebkit.onHtmlCallFile(c,cc);
}

 // 接收檔案 .h

 void onHtmlCallFile(QString strArvTime, QString strOption);

// 檔案收發